频道栏目
首页 > 程序开发 > 移动开发 > Android > 正文
React Native在Windows下的安装及环境配置(Android)
2017-08-10 10:35:11         来源:依然范特西  
收藏   我要投稿

React Native在Windows下的安装及环境配置(Android)。

接下来给大家讲一下在Windows环境下安装React Native的环境,React Native是Facebook推出的开源项目框架,类似原生的APP的运行和响应速度,JS和HTML的混合,性能还算不错。详细的大家就百度或谷歌查一下吧。很像JAVA和HTML的混合语法。本文主要针对Android。网上很多教程是旧的,本教程应该算是最新的了。

\

官方地址:https://facebook.github.io/react-native/

官方Github地址:https://github.com/facebook/react-native/

1、首先你电脑已经安装了Android Studio,JDK。这就不用说了,会Android的电脑都会有这些。

2、下载安装Nodejs。去官网下载:https://nodejs.org/en/ ,推荐最好下LTS版本,12M左右。

\

正常安装即可。

\

3、安装完Nodejs后,运行cmd打开命令窗口,输入:node -v,如果正确获取到Nodejs版本号,那就说明安装正确。也可以输入npm,看输出有无错误。

\

4、安装React Native命令行工具react-native-cli

输入命令:

npm install -g react-native-cli

\

5、创建一个新项目,名字可以按照你的需要命名。

react-native init AwesomeProject

这里按照官方写的,叫:AwesomeProject。

如果你电脑没安装yarn,会自动先安装yarn。

\

Yarn是什么?百度或谷歌下。当然,yarn不翻墙的话下载很慢,所以推荐大家去官网下载直接安装即可。https://yarnpkg.com/zh-Hans/

\

\

\

下图是命令安装成功后的界面:

\

6、目录结构看下:

\

\

7、运行我们的React Native服务器端:输入命令行前,当前所在路径要是项目的根目录。

react-native start
\

8、浏览器就可以运行访问编译了。

用浏览器访问https://localhost:8081/index.android.bundle?platform=android,如果可以访问表示服务器端已经可以了。
\

9、运行编译项目:

刚才运行服务器的命令窗口不要关闭,另外打开一个命令窗口,输入:

react-native run-android

IOS的话,输入:

react-native run-ios

前提是 已经运行启动了模拟器,或者连接了真机才可以这样输入命令。

第一次运行,如果你没有安装gradle-2.14-all的话,会进行下载。

\

还有一种方式编译运行,就是用Android Studio直接打开android工程文件,运行编译到手机或者模拟器即可,支持Genymotion。如果想手机的React-Native APP可以访问我们的刚才电脑上运行的服务器,那么一定要在同一个wifi下。

运行正常的话,会出现下图界面。

\

如果出现红色的错误,可以点击菜单键或者长按菜单键,重载或者设置服务器IP地址和端口号。

现在就可以编辑项目根目录的index.android.js文件了。然后重新启动APP就可以看到修改后的效果了。

\

点击复制链接 与好友分享!回本站首页
上一篇:Android中的ORMLite的简单使用
下一篇:Android四大组件之-服务(part 1)
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站