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

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

前言

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

开始

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

  1. JAVA环境 ,不多赘述,网上有许多而且很普遍(最主要是我会,不记录);

  2. 安卓环境 ,需要下载安装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)安卓环境变量配置:自行百度吧,很简单

  3. 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
    
  4. React-native :打开终端,全局安装 React Native CLI:

npm install -g react-native-cli
  1. 初始化项目:用终端运行
 npx react-native init MyReactNativeApp --version <desired-version>
 例如:npx react-native init MyReactNativeApp --version 0.63.3

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

  1. 配置镜像地址:我本以为初始化成功后就万事大吉了,结果被教做人了,运行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") }
    	}
    }
    
  2. 其他配置
    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
    
  3. 运行npm install
    为防止出现版本冲突导致不成功可以先强制清除缓存

    npm cache clean --force
    

    在忽略冲突安装

    npm install --legacy-peer-deps  
    
  4. 运行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  
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值