window平台搭建react-native环境

分手后的思念是犯贱 2022-06-06 11:27 341阅读 0赞

**配了两天！真心觉得累，首先是很多文章都是基于mac平台的，window很少，而且这很少的几篇内容也很像，最后是官方文档，前期说了安装react-native-cli，但是，怎么集成到模拟器上面去？代码如何导进ide？用那个ide开发？hello，world应该代码修改后，要怎么刷新？。。。一大堆疑问，真shit！什么叫文档，什么叫资料，什么叫详细，推荐去看看spring的文档。**

**那么，现在要搭建react-native的开发环境，分为3个步骤**

*  需要什么软件
 *  安装过程
 *  测试

1.**需要的软件**

*  jdk1.8及以上
 *  nodejs
 *  python2
 *  react-native-cli
 *  Android Studio
 *  Android SDK 6.0
 *  Genymotion 模拟器
 *  vscode

2.**安装过程**

*  jdk

自行百度，一大堆可靠的教程

*  nodejs 和 python2 按照官方文档的来，打开cmd，将下面的命令依次粘贴到命令行中

安装命令行工具

@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

安装nodejs

choco install nodejs.install

安装python2

choco install python2

设置国内的镜像源

npm config set registry https://registry.npm.taobao.org --global
    npm config set disturl https://npm.taobao.org/dist --global

*  react-native-cli

第一种方法：

执行下面的命令，安装过程可能会久一点

npm install -g yarn react-native-cli

设置国内的镜像源

yarn config set registry https://registry.npm.taobao.org --global
    yarn config set disturl https://npm.taobao.org/dist --global

第二种方法：

直接到[https://github.com/facebook/react-native.git][https_github.com_facebook_react-native.git]下载react-native-cli，然后cmd中切到该目录下，执行下面的命令即可

npm install -g

*  Android Studio 和 Android SDK 6.0

到这儿下一个Android Studio：[http://www.android-studio.org/][http_www.android-studio.org]

安装Android Studio和Android SDK 6.0，我是让公司做移动端的同事帮我装的，最好让他们帮你装，如果没有，用react-native官网的：[http://reactnative.cn/docs/0.50/getting-started.html\#content][http_reactnative.cn_docs_0.50_getting-started.html_content]

*  Genymotion 模拟器

到Genymotion官网下一个，去注册个号，要个人版的（免费）

官网：[http://www.genymotion.net/][http_www.genymotion.net]  
下载：[https://www.genymotion.com/download/][https_www.genymotion.com_download]

配置Genymotion 看教程：[http://blog.csdn.net/cdnight/article/details/46408677][http_blog.csdn.net_cdnight_article_details_46408677]

*  vscode

直接到百度下就行了

3.**测试**

**打开cmd，切换到F盘（其它盘也可以，就是不要默认的c盘）**

**初始化一个react-native项目(10分钟或以上)**

react-native init HelloWorldApp

**完成后如下**

![这里写图片描述][SouthEast]

**运行项目（安卓环境）**

**进入刚刚创建的HelloWorldApp目录下**

cd HelloWorldApp
    react-native run-android

**这时，命令执行过程中会顺带的打开一个窗口，然后在浏览器输入**：[http://localhost:8081/index.bundle?platform=android][http_localhost_8081_index.bundle_platform_android]

![这里写图片描述][SouthEast 1]

![这里写图片描述][SouthEast 2]

**这时候，说明react-native的服务端已经跑起来了,完整的目录如下**

![这里写图片描述][SouthEast 3]

**那么，怎么集成到模拟器上？**  
**先打开Android Studio和Genymotion ，把项目导进Android Studio，导入android文件夹就够了**

![这里写图片描述][SouthEast 4]

**然后，点击导航栏的绿色三角形图标，选择Genymotion 模拟器**

![这里写图片描述][SouthEast 5]

**等待一下，模拟器就出现HelloWorldApp的应用。**

**可是，要怎么编辑HelloWorldApp的首页？**  
**打开vscode，导进整个HelloWorldApp文件，修改App.js的内容**

![这里写图片描述][SouthEast 6]

**保存后，到模拟器reload下**

![这里写图片描述][SouthEast 7]

## **最终Hello world出来了** ##

![这里写图片描述][SouthEast 8]

[https_github.com_facebook_react-native.git]: https://github.com/facebook/react-native.git
[http_www.android-studio.org]: http://www.android-studio.org/
[http_reactnative.cn_docs_0.50_getting-started.html_content]: http://reactnative.cn/docs/0.50/getting-started.html#content
[http_www.genymotion.net]: http://www.genymotion.net/
[https_www.genymotion.com_download]: https://www.genymotion.com/download/
[http_blog.csdn.net_cdnight_article_details_46408677]: http://blog.csdn.net/cdnight/article/details/46408677
[SouthEast]: /images/20220606/9e85d4ca12ae4ee586ea4b380c9dea24.png
[http_localhost_8081_index.bundle_platform_android]: http://localhost:8081/index.bundle?platform=android
[SouthEast 1]: /images/20220606/2a5772ecedd94e53ad767adb851d3b00.png
[SouthEast 2]: /images/20220606/ab03937f6b4b478d841424cb934720b8.png
[SouthEast 3]: /images/20220606/9958b47cd93842c3a062a386a27c229a.png
[SouthEast 4]: /images/20220606/dc45082b98f949de99297292e224b954.png
[SouthEast 5]: /images/20220606/c15c530f9b4149f3ade4a501d487bacd.png
[SouthEast 6]: /images/20220606/385f28e2233d439096e483fa0d6a8d9e.png
[SouthEast 7]: /images/20220606/a138460736004231bde10f7fc87d16a8.png
[SouthEast 8]: /images/20220606/eaf669a34db042cda6485285f0777f68.png