React Native环境搭建到新建项目 - 执候

公告

React Native环境搭建到新建项目

搭建RN环境参考官网

必须安装的依赖有：Node、JDK 和 Android Studio。(windows)

1 Node安装

进入nodejs官方网站下载软件(nodejs.org),

安装成功标志：

运行node -v 出现版本号

运行npm -v 出现版本号

npm作为一个NodeJS的模块管理，我们要先配置npm的全局模块的存放路径以及cache的路径，例如我希望将以上两个文件夹放在nodejs的主目录下，便在nodejs下建立“node_global”及“node_cache”两个文件夹。我们就在cmd中键入两行命令：

npm config set prefix "D:\nodejs\node_global"

　　和

npm config set cache "D:\nodejs\node_cache"

下面这一步非常关键，我们需要设置系统变量。进入我的电脑→属性→高级→环境变量。在系统变量下新建“NODE_PATH”，输入“D:\nodejs\node_global\node_modules”。

安装bower, npm install bower -g; -g表示全局

输入 node，

require('bower') 正常显示表示成功

2 Java SE Development Kit (JDK)

jdk-8u301-windows-x64

安装可以参考这边文档，建议装在自己的盘，以命名文件夹

参考地址：https://blog.csdn.net/tianma666666/article/details/79708914?utm_source=blogxgwz3

新版本做了变更

参考一下文档

https://blog.csdn.net/m0_62617719/article/details/128145728

3安装Android Studio可以直接参考官网

android-studio-2020.3.1.22-windows

这里android studio建议你装在自己的文件夹不要默认安装c盘参考路径：D:\Android\Android Studio
然后SDK你也装在D:\Android这个路径下参考路径：D:\Android\SDK

配置 ANDROID_HOME 环境变量#

React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径，从而正常进行编译。

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建，创建一个名为ANDROID_HOME的环境变量（系统或用户变量均可），指向你的 Android SDK 所在的目录（具体的路径可能和下图不一致，请自行确认）：

ANDROID_HOME Environment Variable

把一些工具目录添加到环境变量 Path#

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量，选中Path变量，然后点击编辑。点击新建然后把这些工具目录路径添加进去：platform-tools、emulator、tools、tools/bin

%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\emulator
%ANDROID_HOME%\tools
%ANDROID_HOME%\tools\bin

环境就基本差不多了
如果这块你发现你展示不出来，展示的是add啥的

你这时候就需要设置代理,如果展示了下面就忽略
/**************/

Gradle 代理配置在 `gradle.properties` （Windows 上路径 `%USERPROFILE%\.gradle\gradle.properties`）中设置代理：

找到.gradle\gradle.properties 文件做以下设置设置不方便给，百度把然后在.gradle里面新建init.gradle文件，做Gradle镜像源设置然后file下点击

这个就会自动安装了，装好就好了

/**************/

然后参考官网创建项目就行了
npx react-native init AwesomeTSProject --template react-native-template-typescript
如果出现react-native不是内部命令，可能版本比较低
全局安装npm install react-native-cli -g 即可解决
装好之后，执行npm run android或者你需要的指令即可

遇到的几个小问题
第一次启动报了一个这样的错