React-Native 初始化的一系列大坑

京京12138

已于 2024-12-30 08:43:50 修改

阅读量1.8k

点赞数 30

CC 4.0 BY-SA版权

于 2024-12-25 15:31:20 首次发布

本文链接：https://blog.youkuaiyun.com/u014748384/article/details/144718096

React-Native 初始化的一系列大坑

前言
开始
结束寄语

前言

作为java开发，第一次接触node.js、React以及React-Native这些前端技术，本以为和后端一样无非就是引包导包而已，结果真的是处处碰壁，特此仅以初始化React-Native项目纪念一下

开始

就我目前浅显的认知React-Native是基于React的，而React又是基于node.js之上，所以必须先有node.js环境。而我是用的React-Native是用于安卓和苹果端开发，因为暂时没有苹果机器，所以制作安卓开发，这就需要安卓的对应的环境，以及安卓所需要的java开发环境。
接下来就是一步一步记录：

JAVA环境 ，不多赘述，网上有许多而且很普遍（最主要是我会，不记录）；
安卓环境 ，需要下载安装Android Studio；
1）下载地址： https://developer.android.google.cn/studio?hl=zh-cn
2）安装时要选择在SDK Manager菜单选择 Android SDK，（需要什么版本就选什么版本）,jdk8的小伙伴建议选择Andoid 10.0(Q)
如下图：
3）然后在SDK Tools中Android SDK Build-Tools下的
```
35.0.0
34.0.0
30.0.3
29.0.3
29.0.2
28.0.3
26.0.3
26.0.2
```
这些是比较常用的，当然也可以根据自己需求选择，
还有加上选择如下图，这些是用于开启安卓虚拟机做调试用的

安装时可能遇到“国家墙”，自备梯子吧，这些选项也可以安装之后在进行选择下载
4）安卓环境变量配置：自行百度吧，很简单
node.js,说实话，个人觉得最恶心的就是它，版本多不说，还兼容性差的要死；个人建议不要去官网下载，我之前就遇到过坑，教学版本和实际应用版本不一致，卸载重装再卸载再重装，恶心的要死！！
建议使用nvm安装node.js可以灵活切换版本；
2024-12-25最新的是以下版本（也可以自行搜索下载）
https://github.com/coreybutler/nvm-windows/releases/tag/1.1.12；
```
简单说一下使用方法：
1.安装node ：nvm install <version>
例如，安装 Node.js 16.14.0
2.切换node：nvm use <version>
例如，切换到 Node.js 16.14.0
```
React-native ：打开终端，全局安装 React Native CLI：

npm install -g react-native-cli

初始化项目：用终端运行

 npx react-native init MyReactNativeApp --version <desired-version>
 例如：npx react-native init MyReactNativeApp --version 0.63.3

个人建议一定要加上-- version 否则没准会出现什么不兼容的问题

配置镜像地址：我本以为初始化成功后就万事大吉了，结果被教做人了，运行npm install和yarn android无不失败。
找了好久解决办法最终发现应该是源的问题，在根目录下
./android/build.gradle
文件中添加镜像源

buildscript {
    ext {
        buildToolsVersion = "29.0.2"
        minSdkVersion = 16
        compileSdkVersion = 29
        targetSdkVersion = 29
    }
    repositories {
        google()
        mavenCentral() // 使用mavenCentral代替jcenter
        maven { url 'https://maven.aliyun.com/repository/gradle-plugin/' }
        maven { setUrl("https://maven.aliyun.com/repository/central") }
        maven { setUrl("https://maven.aliyun.com/repository/jcenter") }
        maven { setUrl("https://maven.aliyun.com/repository/google") }
        maven { setUrl("https://maven.aliyun.com/repository/gradle-plugin") }
        maven { setUrl("https://maven.aliyun.com/repository/public") }
        maven { setUrl("https://jitpack.io") }
        maven { setUrl("https://maven.aliyun.com/nexus/content/groups/public/") }
        maven { setUrl("https://maven.aliyun.com/nexus/content/repositories/jcenter") }
    }
    dependencies {
        classpath("com.android.tools.build:gradle:3.5.3")
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}
allprojects {
    repositories {
        mavenLocal()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url("$rootDir/../node_modules/react-native/android")
        }
        maven {
            // Android JSC is installed from npm
            url("$rootDir/../node_modules/jsc-android/dist")
        }

        google()
        mavenCentral()
        maven {
            url 'https://maven.aliyun.com/nexus/content/repositories/releases/'
        }

        maven { setUrl("https://maven.aliyun.com/repository/central") }
        maven { setUrl("https://maven.aliyun.com/repository/jcenter") }
        maven { setUrl("https://maven.aliyun.com/repository/google") }
        maven { setUrl("https://maven.aliyun.com/repository/gradle-plugin") }
        maven { setUrl("https://maven.aliyun.com/repository/public") }
        maven { setUrl("https://jitpack.io") }
        maven { setUrl("https://maven.aliyun.com/nexus/content/groups/public/") }
        maven { setUrl("https://maven.aliyun.com/nexus/content/repositories/jcenter") }
	}
}

其他配置
1）./android/app/build.gradle文件中
需要修改
dependencies下的react-native版本
```
implementation "com.facebook.react:react-native:0.63.3"
```
2）./android/gradle.properties文件中
需要加入gradle的jvm参数
```
org.gradle.jvmargs=-Xmx4096m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8
```
运行npm install
为防止出现版本冲突导致不成功可以先强制清除缓存
```
npm cache clean --force
```
在忽略冲突安装
```
npm install --legacy-peer-deps  
```
运行yarn android

结束寄语

前端技术乱而复杂，在此希望给朋友们能提供一滴滴帮助，也不枉我这几天的学习和乱试
下面给出我是用的版本：方便大家参考

java：1.8.0_202
nodejs：v12.22.12
react：16.31.1
react-native：0.63.3
nvm：1.1.12

再就是查看版本的命令：

java版本：javac -version
nodejs版本：node -v
react/react-native版本：react-native -v
nvm版本：nvm -version