前言
作为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