关闭 x
IT技术网
    技 采 号
    ITJS.cn - 技术改变世界
    • 实用工具
    • 菜鸟教程
    IT采购网 中国存储网 科技号 CIO智库

    IT技术网

    IT采购网
    • 首页
    • 行业资讯
    • 系统运维
      • 操作系统
        • Windows
        • Linux
        • Mac OS
      • 数据库
        • MySQL
        • Oracle
        • SQL Server
      • 网站建设
    • 人工智能
    • 半导体芯片
    • 笔记本电脑
    • 智能手机
    • 智能汽车
    • 编程语言
    IT技术网 - ITJS.CN
    首页 » 安卓开发 »Windows下搭建React Native Android开发环境详解

    Windows下搭建React Native Android开发环境详解

    2015-12-26 00:00:00 出处:安卓弟的专栏
    分享

    最近看到React Native好像好厉害的样子,好奇心驱使之下体验了一下并将在Window下搭建React Natvie Android环境的步骤记录下来,并有需要的朋友参考。(我都是参考官方文档的)

    react-native的GitHub地址:https://github.com/facebook/react-native

    react-native的文档地址:http://facebook.github.io/react-native/docs/getting-started.html

    1.准备工作:

    打开文档点击’Android Setup’,可以看到需要

    (a)安装Git from Windows(傻瓜式安装)

    (b)Android SDK(配置ANDROID_HOME环境)

    (c)使用Gradle构建的(假如你已经在使用Android Studio的这些的都可以忽略了)

    手把手教你在Windows下搭建React Native Android开发环境

    注:(这些工作要准备好不然最后出错就好坑了)

    手把手教你在Windows下搭建React Native Android开发环境

    手把手教你在Windows下搭建React Native Android开发环境

    手把手教你在Windows下搭建React Native Android开发环境

    2.开始

    上面两张图都提示我们需要安装Node.js,打开链接下载Node.js进行安装(傻瓜式安装)。在这里下载最新的。

    手把手教你在Windows下搭建React Native Android开发环境

    打开cmd运行执行以下命令

    $ npm install -g react-native-cli

    手把手教你在Windows下搭建React Native Android开发环境

    手把手教你在Windows下搭建React Native Android开发环境

    $ react-native init AwesomeProject

    上面这个命令下载AwsomeProject,假如下载不了可以在我的GitHub的AwesomeProject下载。

    命令行在线下载的Awesome默认放到用户文件夹下。

    手把手教你在Windows下搭建React Native Android开发环境

    注: AwesomProject下的anroid下的local.properties文件是没有的,这里我从其他项目直接copy过来。

    手把手教你在Windows下搭建React Native Android开发环境

    接下来重新打开一个cmd并切换到AwesomProject目录

    执行 npm start,会显示如图的提示,然后再输入react-native start命令。假如显示如图那样,证明你服务已经启动了,在这里我们可以看到服务的端口是8081.

    手把手教你在Windows下搭建React Native Android开发环境

    我们在浏览器证明服务是否启动:

    在浏览器输入地址:http://localhost:8081/index.android.bundle platform=android

    假如显示下图的那样,那就证明服务已经启动了。假如没有启动的话,接下来那就不用做啦~~~直接break吧

    手把手教你在Windows下搭建React Native Android开发环境

    最后我们编译运行AwesomeProject。有点激动了吧。。。。记得要先打开Genymotin模拟器或者连上真机。

    手把手教你在Windows下搭建React Native Android开发环境

    执行react-native run-android命令

    手把手教你在Windows下搭建React Native Android开发环境

    假如显示下图,那就说明AwesomeProject项目编译成功了。

    手把手教你在Windows下搭建React Native Android开发环境

    最后就是这样子的啦~~哈哈~~~(改过了index.android.js的效果)

    手把手教你在Windows下搭建React Native Android开发环境

    真机需要网络需要在同一个局域网(开个WIFI热点就可以了)

    运行在真机上出现以下这种情况。。。怎么办

    手把手教你在Windows下搭建React Native Android开发环境

    (这手机系统是5.0.1的)

    在官方文档可以看到

    手把手教你在Windows下搭建React Native Android开发环境

    执行adb reverse tcp:8081 tcp:8081命令

    手把手教你在Windows下搭建React Native Android开发环境

    再点击RELOADJS~~~

    手把手教你在Windows下搭建React Native Android开发环境

    以上有误,请大家谅解和纠正。

    上一篇返回首页 下一篇

    声明: 此文观点不代表本站立场;转载务必保留本文链接;版权疑问请联系我们。

    别人在看

    正版 Windows 11产品密钥怎么查找/查看?

    还有3个月,微软将停止 Windows 10 的更新

    Windows 10 终止支持后,企业为何要立即升级?

    Windows 10 将于 2025年10 月终止技术支持,建议迁移到 Windows 11

    Windows 12 发布推迟,微软正全力筹备Windows 11 25H2更新

    Linux 退出 mail的命令是什么

    Linux 提醒 No space left on device,但我的空间看起来还有不少空余呢

    hiberfil.sys文件可以删除吗?了解该文件并手把手教你删除C盘的hiberfil.sys文件

    Window 10和 Windows 11哪个好?答案是:看你自己的需求

    盗版软件成公司里的“隐形炸弹”?老板们的“法务噩梦” 有救了!

    IT头条

    公安部:我国在售汽车搭载的“智驾”系统都不具备“自动驾驶”功能

    02:03

    液冷服务器概念股走强,博汇、润泽等液冷概念股票大涨

    01:17

    亚太地区的 AI 驱动型医疗保健:2025 年及以后的下一步是什么?

    16:30

    智能手机市场风云:iPhone领跑销量榜,华为缺席引争议

    15:43

    大数据算法和“老师傅”经验叠加 智慧化收储粮食尽显“科技范”

    15:17

    技术热点

    SQL汉字转换为拼音的函数

    windows 7系统无法运行Photoshop CS3的解决方法

    巧用MySQL加密函数对Web网站敏感数据进行保护

    MySQL基础知识简介

    Windows7和WinXP下如何实现不输密码自动登录系统的设置方法介绍

    windows 7系统ip地址冲突怎么办?windows 7系统IP地址冲突问题的

      友情链接:
    • IT采购网
    • 科技号
    • 中国存储网
    • 存储网
    • 半导体联盟
    • 医疗软件网
    • 软件中国
    • ITbrand
    • 采购中国
    • CIO智库
    • 考研题库
    • 法务网
    • AI工具网
    • 电子芯片网
    • 安全库
    • 隐私保护
    • 版权申明
    • 联系我们
    IT技术网 版权所有 © 2020-2025,京ICP备14047533号-20,Power by OK设计网

    在上方输入关键词后,回车键 开始搜索。Esc键 取消该搜索窗口。