React Native在Windows下的安装及环境配置（Android）

我不是女神ヾ 2022-06-10 04:16 214阅读 0赞

![20170809215517674][]

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

![20170809220008706][]

官方地址： [https://facebook.github.io/react-native/][https_facebook.github.io_react-native]

官方Github地址： [https://github.com/facebook/react-native/][https_github.com_facebook_react-native]

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

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

![20170809220337386][]

正常安装即可。

![20170809220919512][]

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

![20170809221122876][]

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

注：如果你的电脑访问国外的网络很慢，又不能翻墙，那就使用国内镜像吧，这里以淘宝镜像为例，输入如下命令：

npm config set registry https://registry.npm.taobao.org

后续的一些下载都是国内淘宝镜像地址下载了，速度快些。如果上面配置正确的话，输入命令：

npm info underscore

会返回淘宝镜像返回过来的一系列信息字符。

输入命令：

npm install -g react-native-cli

![20170809221532654][]

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

react-native init AwesomeProject

这里按照官方写的，叫：AwesomeProject。

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

![20170809221803505][]

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

![20170809222156653][]

![20170809222331719][]

![20170809222809346][]

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

![20170809223254327][]

6、目录结构看下：

![20170809223344506][]

![20170809223354749][]

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

react-native start

![20170809223637718][]

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

用浏览器访问 [http://localhost:8081/index.android.bundle?platform=android][http_localhost_8081_index.android.bundle_platform_android]，如果可以访问表示服务器端已经可以了。  
![20170809224024648][]

9、运行编译项目：

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

react-native run-android

IOS的话，输入：

react-native run-ios

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

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

![20170809225801116][]

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

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

![20170810190517108][]

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

![20170810190531629][]

如果出现下图错误的话，进入项目根目录输入如下命令：

React-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

![20170810191049979][]

输入如上命令就直接把JS编译打包进APP里了。

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

![20170809231205634][]

注：其实一些命令也可以在Android Studio的Terminal命令窗口输入，和在cmd命令窗口输入一样，很方便。

参考文献：

[https://facebook.github.io/react-native/docs/getting-started.html][https_facebook.github.io_react-native_docs_getting-started.html]

[20170809215517674]: /images/20220610/f0dc304abc324c2e809b8fbd7efed0e2.png
[20170809220008706]: /images/20220610/dc3f358cc56c466d90f399f2e5bfc5f0.png
[https_facebook.github.io_react-native]: https://facebook.github.io/react-native/
[https_github.com_facebook_react-native]: https://github.com/facebook/react-native/
[https_nodejs.org_en]: https://nodejs.org/en/
[20170809220337386]: /images/20220610/41bb3d9df10042ffbdc12d9ed9d1138b.png
[20170809220919512]: /images/20220610/05637547a0534c4990aed1e877053373.png
[20170809221122876]: /images/20220610/c426397f7eb74c2c9394579ed1600815.png
[20170809221532654]: /images/20220610/5fadcf23874542f38b98d495bbd1a22b.png
[20170809221803505]: /images/20220610/48ab276e637943cea17cd8415b133e1d.png
[https_yarnpkg.com_zh-Hans]: https://yarnpkg.com/zh-Hans/
[20170809222156653]: /images/20220610/309792e6ecbe474bb5f05479590f506f.png
[20170809222331719]: /images/20220610/e0ffb368d6c54ed1918d0f4f4eb178cb.png
[20170809222809346]: /images/20220610/7fd4b14347404298aaedef4fcace103e.png
[20170809223254327]: /images/20220610/fb0376a659044e9bb4d04f9fcce1126b.png
[20170809223344506]: /images/20220610/b72af5b512894fde9728188d7b01bacf.png
[20170809223354749]: /images/20220610/10315ad5367e42d3b8e0630f9428f2e2.png
[20170809223637718]: /images/20220610/7b387c32d2844d3198654595d2ce7d7a.png
[http_localhost_8081_index.android.bundle_platform_android]: http://localhost:8081/index.android.bundle?platform=android
[20170809224024648]: /images/20220610/cfac29d15eeb42d89a4eccd792eb0b02.png
[20170809225801116]: /images/20220610/899aabfb7d484c25b0261e19adacbb7e.png
[20170810190517108]: /images/20220610/5f6f98d8da8f431aa9a750e3a4dabeab.png
[20170810190531629]: /images/20220610/b20c69d534e24c599adb08d225ad1702.png
[20170810191049979]: /images/20220610/4132810cf86b4bfab23b2ca41f8b4b48.png
[20170809231205634]: /images/20220610/66aac30112ec454bae5b5d900dd61ebd.png
[https_facebook.github.io_react-native_docs_getting-started.html]: https://facebook.github.io/react-native/docs/getting-started.html