windows 64位下,React-Native环境搭建详解 (Android)

喜欢ヅ旅行 2022-06-07 06:55 309阅读 0赞

React-Native环境搭建需要：   
1、安装Java JDK   
2、安装Android Studio   
3、安装node.js   
4、安装git   
5、安装Python 2.x （注意目前不支持Python 3版本）   
6、安装react-native-cli   
7、测试环境是否搭建好

附：React-Native中文网环境搭建链接 [https://reactnative.cn/docs/0.46/getting-started.html\#content][https_reactnative.cn_docs_0.46_getting-started.html_content]

一、java Jdk安装，下载地址：[http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html][http_www.oracle.com_technetwork_java_javase_downloads_jdk8-downloads-2133151.html]。由于我的系统是64位的，这里选择：jdk-8u131-windows-x64.exe。下载完后，双击jdk-8u131-windows-x64.exe 进行安装。   
接着配置系统环境，右击“计算机”–>”属性”–>”更改设置”–>”高级”–>”环境变量”，如图：   
![这里写图片描述][SouthEast]   
点击系统变量的“ 新建”–>输入 JAVA\_HOME以及jdk安装路径，如图：   
![这里写图片描述][SouthEast 1]

在系统变量里找到Path,双击在变量值的最前面加上 %JAVA\_HOME%\\bin;后，点击确定。如图：   
![这里写图片描述][SouthEast 2]

重打开cmd命令，输入   
java -version 后出现如下图则java环境配置成功：   
![这里写图片描述][SouthEast 3]

二、由于Android Studio包含了运行和测试React Native应用所需的Android SDK和模拟器。所以android studio安装，下载地址：[https://developer.android.com/studio/index.html][https_developer.android.com_studio_index.html]

附android studio安装教程链接：[http://www.runoob.com/android/android-studio-install.html][http_www.runoob.com_android_android-studio-install.html]

Android studio安装时，记得要勾选上android sdk,如下图：   
![这里写图片描述][SouthEast 4]

设置环境变量ANDROID\_HOME 与JAVA\_HOME配置类似，右击“计算机”–>”属性”–>”更改设置”–>”高级”–>”环境变量”，点击系统变量的“ 新建”–>输入 ANDROID\_HOME以及sdk路径，例如：（ANDROID\_HOME=> E:\\Android\\sdk）设置环境变量Path：%ANDROID\_HOME%\\tools;%ANDROID\_HOME%\\platform-tools；   
重打开cmd命令，输入adb 后出现如下图则android 环境配置成功：   
![这里写图片描述][SouthEast 5]

三、node.js安装，下载地址：[https://github.com/coreybutler/nvm-windows/releases][https_github.com_coreybutler_nvm-windows_releases] 下载 nvm-setup.zip 安装文件。   
双击![这里写图片描述][SouthEast 6]运行安装，安装完后，打开cmd命令窗口，输入nvm -version，出现以下界面，证明nvm安装成功！![这里写图片描述][SouthEast 7]

为了安装node.js安装更快，nvm配置淘宝镜像   
找到刚才nvm的安装目录下的settings.txt文件，打开在末尾增加 node\_mirror: [http://npm.taobao.org/mirrors/node/][http_npm.taobao.org_mirrors_node]   
npm\_mirror: [https://npm.taobao.org/mirrors/npm/][https_npm.taobao.org_mirrors_npm]

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

然后通过nvm安装对应版本的nodejs,打开cmd命令窗口，运行   
nvm install latest(安装最新版本)   
也可以指定版本 nvm install 6.10.0   
安装完成后会以下界面：   
![这里写图片描述][SouthEast 9]

四、git安装，如果没有配置git，需要先下载对应的客户端，然后将git加入path环境变量即可.   
下载地址：[https://git-for-windows.github.io/][https_git-for-windows.github.io]

五、Python安装 （注意目前不支持Python 3版本）   
下载地址：[https://www.python.org/downloads/release/python-2713/][https_www.python.org_downloads_release_python-2713]

下载完后，双击安装 python-2.7.13.amd64.msi，安装完后，配置环境变量,在path的最前面添加python的安装路径，如图：   
![这里写图片描述][SouthEast 10]

重打开cmd命令，输入python -v 后出现如下图则python 环境配置成功：   
![这里写图片描述][SouthEast 11]

六、react-native-cli安装（React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。）   
cmd命令，输入 npm install -g yarn react-native-cli   
如果成功的话，如下图所示：   
![这里写图片描述][SouthEast 12]

七、测试React-Native是否搭建好   
主要下面三个命令初始化react-native项目并运行到android手机上。   
1、react-native init HelloProject   
2、cd HelloProject   
3、react-native run-android

步骤1 在F盘创建一个名为RN的文件夹用于包含react-native项目，进入目录，按住Shift+鼠标右键，选择在“在此处打开命令窗口（W）”如图：   
![这里写图片描述][SouthEast 13]

接着输入react-native init HelloProject,初始化react-native项目，运行完后，如果成功会在F盘的RN文件夹生成一个HelloProject项目，如图：

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

步骤2 cd HelloProject 进入项目

步骤3 电脑通过USB连接手机，手机要在设置打开“开发者选项”（不同的手机，打开的方式不同）。然后输入react-native run-android命令，成功的话会出现下图：   
![这里写图片描述][SouthEast 15]   
![这里写图片描述][SouthEast 16]

同时，手机上会出现，以下界面   
![这里写图片描述][SouthEast 17]

注意事项：   
如果运行不能成功，有以下可能：   
1、要确保以上工具都安装了，并且到加入系统的Path路径上

2、存放react-native项目的文件夹名，最好由字母和下划线组成

3、查看手机是否连接上电脑，可以用adb devices命令查看是否连接上，如下图：   
![这里写图片描述][SouthEast 18]

4、项目中的目录下的 android–>build.gradle中   
compileSdkVersion 23   
buildToolsVersion “23.0.1”   
中的版本，android sdk要包含有。   
查看android sdk build版本，打开android studio,菜单File–>选项 Settings –> Appearance&Behavior –> System Settings –>Android SDK–>SDK Platforms和 SDK Tools,如下图：

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

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

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

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

5、检查android 环境变量是否配置好

6、如果允许出现白屏或者报错，可以通过摇一摇手机或者电脑cmd运行adb shell input keyevent 82命令，调查调试框，如图：   
![这里写图片描述][SouthEast 23]

接着，点击Dev Settings，如图：   
![这里写图片描述][SouthEast 24]

然后点击Debug server host & port for device，输入ip和端口，如图：   
![这里写图片描述][SouthEast 25]

最后，重新运行 react-native run-android 即可。

附：   
React-native调试：   
1、如果android模拟器的话，可以在电脑键盘上的按两下R (reload项目)   
2、真机调出调试窗口：   
（1）手机摇一摇   
（2）手机菜单键（某些手机不行）   
（3）电脑打开cmd运行 adb shell input keyevent 82   
3、连接模拟器方式   
夜神模拟器 adb connect 127.0.0.1:62001   
逍遥模拟器 adb connect 127.0.0.1:21503

[https_reactnative.cn_docs_0.46_getting-started.html_content]: https://reactnative.cn/docs/0.46/getting-started.html#content
[http_www.oracle.com_technetwork_java_javase_downloads_jdk8-downloads-2133151.html]: http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
[SouthEast]: /images/20220607/1925e6510a7145529a23497e36817a74.png
[SouthEast 1]: /images/20220607/b1a2d656f90d47ce872edb6831e13846.png
[SouthEast 2]: /images/20220607/ddcf98474e4b49109206a33312fec56d.png
[SouthEast 3]: /images/20220607/9df9e4e7804843f8b78c5aefc5b8a074.png
[https_developer.android.com_studio_index.html]: https://developer.android.com/studio/index.html
[http_www.runoob.com_android_android-studio-install.html]: http://www.runoob.com/android/android-studio-install.html
[SouthEast 4]: /images/20220607/7fca94cb28b34845b88d4746d85b8095.png
[SouthEast 5]: /images/20220607/a972f8cae7e04cd392d2942791be99e0.png
[https_github.com_coreybutler_nvm-windows_releases]: https://github.com/coreybutler/nvm-windows/releases
[SouthEast 6]: https://img-blog.csdn.net/20170717131031375?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMjEyMTEwNQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 7]: /images/20220607/7925ea318d6748969905d806de927dce.png
[http_npm.taobao.org_mirrors_node]: http://npm.taobao.org/mirrors/node/
[https_npm.taobao.org_mirrors_npm]: https://npm.taobao.org/mirrors/npm/
[SouthEast 8]: /images/20220607/66777fbc2263451c8d109c8fe984de4a.png
[SouthEast 9]: /images/20220607/d984b5f0896b40ffa8f80e8684eae1d9.png
[https_git-for-windows.github.io]: https://git-for-windows.github.io/
[https_www.python.org_downloads_release_python-2713]: https://www.python.org/downloads/release/python-2713/
[SouthEast 10]: /images/20220607/c737eea6201f4522a875d794b3b5ac0a.png
[SouthEast 11]: /images/20220607/8bf280f4896343aa976bb27ab275ef8b.png
[SouthEast 12]: /images/20220607/0f5e43d6262e487d8979082a37992a54.png
[SouthEast 13]: /images/20220607/ef406fc481c24d82ba10a0df4af82e73.png
[SouthEast 14]: /images/20220607/d84346f508354061bdf849cce9aa6ce1.png
[SouthEast 15]: /images/20220607/f5c122436f334858bafb23d3577968c4.png
[SouthEast 16]: /images/20220607/1731a1ce1e5b4076a70370923d1730f0.png
[SouthEast 17]: /images/20220607/a505d74d79a641d4adf5044802dd0dd2.png
[SouthEast 18]: /images/20220607/55f374f8010044319470cacda924704b.png
[SouthEast 19]: /images/20220607/85239bd974b44207adfe2f8c49a1756e.png
[SouthEast 20]: /images/20220607/f8eaa98a4764418dbbfc0dc5beb86abc.png
[SouthEast 21]: /images/20220607/686e8357752b4a87a71c6ab2d865d9c8.png
[SouthEast 22]: /images/20220607/ff6c349728d34b0888da5cb160a73643.png
[SouthEast 23]: /images/20220607/16ea839e6f414078b896ae6f8de1b2f7.png
[SouthEast 24]: /images/20220607/2ea68c9ce26b4d07982c8f67a342f09b.png
[SouthEast 25]: /images/20220607/72aabfe51a7c40cd999e1e9abb006eaa.png