RN环境搭建
开发平台:Windows
目标平台:Android
说明:安装顺序进行,全程忽略网络问题(科学上网自己解决),参看官网教程。
1、Node安装:
下载传送门,本人选择版本14.15.1。(注:安装过程会有一个提示是否需要安装python等其他,不用安装)
2、JDK安装:
下载传送门,必须1.8版本,不支持更高版本。
3、java 环境配置:
JAVA_HOME:D:\Program Files\Java\jdk1.8.0_251(jdk安装路径)
CLASSPATH:.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;
Path:%JAVA_HOME%\bin
Path:%JAVA_HOME%\jre\bin(新建直接复制即可,自己编辑注意分号)
JAVA_HOME和CLASSPATH 需要自己新建,Path只需在原有的基础上编辑即可
验证:java -version
结果:
5、Android Studio + SDK 安装:
下载传送门
先安装sdk
此处需要了解一下:
minSdkVersion = 23 //最小支持的android版本
targetSdkVersion = 29 //可以理解为最高支持的android版本,就是<= 29的api都需要适配
compileSdkVersion = 29 //SDK编译版本
buildToolsVersion = "29.0.3" // 编译工具版本
为什么要了解这些因为后面创建项目,需要sdk下载这些,所以安装sdk后需要自己选择安装哪些版本的sdk tools。
配置Android 环境:
ANDROID_HOME:D:\Android\AndroidSDK
Path:%ANDROID_HOME%\tools
Path:%ANDROID_HOME%\platform-tools
Path:%ANDROID_HOME%\emulator
Path:%ANDROID_HOME%\tools\bin
验证:cmd输入:android
打开SDKmanager 就是刚才安装的SDK,代表配置成功。
安装android studio:下载传送门
android studio版本自己选择就好,最好是正式版,4.1以上对某些插件支持不太友好(本人原生开发者,rn不知道会不会有影响),建议4.0.1。
安装过程,一路下一步,安装点击finish,之后一些初始化页面记不太清了,应该会有一个选择让下载sdk的页面,我们选择自己已经安装的路径即可,到了下面的页面检查设置:
4、Gradle 环境配置:
注:此处配置可能和别的博客说法不一样,因为作为android原生开发者gradle一直都是自己选择配置的。为了统一,所以这样配置。
GRADLE_USER_HOME:D:\Android\Gradle
检查配置:
如果不一样,手动选择即可。
接下来是统一的gradle配置:
自己选一下版本下载,教程版本:6.1.1-all
下载后解压到自己创建的路径,如:D:\gradle\gradle-6.1.1
变量配置:
GRADLE_HOME:D:\gradle\gradle-6.1.1
Path:%GRADLE_HOME%\bin
如果是按照GRADLE_USER_HOME 配置,GRADLE_HOME路径就是
D:\Android\Gradle\wrapper\dists\gradle-6.1.1-all\cfmwm155h49vnt3hynmlrsdst\gradle-6.1.1
至此环境全部完成接下来是完整配置截图:
Path:
5、项目创建:
接下来操作为cmd命令操作:
//使用nrm工具切换淘宝源
npx nrm use taobao
//Yarn是 Facebook 提供的替代 npm 的工具,可以加速 node 模块的下载。
npm install -g yarn
//自己创造一个文件夹作为项目保存位置:D:\Project\RNProject
//cmd切换到改目录
//初始化目录:
npx react-native init rnapp
接下是漫长的等待。。。。。。
创建完成:
打开android:
注意选择的文件夹:
首先是build.gradle:
打开修改一下:
buildscript {
//这里是之前提到的版本问题,如有需要修改为之前sdk已经下载的版本。
ext {
buildToolsVersion = "29.0.3"
minSdkVersion = 16
compileSdkVersion = 29
targetSdkVersion = 29
}
repositories {
//这里替换为阿里云国内的镜像,虽然有了科学上网,那个速度还是不敢恭维,下面也要替换哦
maven { url 'https://maven.aliyun.com/repository/jcenter' }
maven { url 'https://maven.aliyun.com/repository/google' }
}
dependencies {
classpath("com.android.tools.build:gradle:3.5.3")
}
}
allprojects {
repositories {
mavenLocal()
maven {
url("$rootDir/../node_modules/react-native/android")
}
maven {
url("$rootDir/../node_modules/jsc-android/dist")
}
//就是这里哦!!!!!!!!!!
maven { url 'https://maven.aliyun.com/repository/jcenter' }
maven { url 'https://maven.aliyun.com/repository/google' }
maven { url 'https://www.jitpack.io' }
}
}
然后是gradle:
打开gradle\wrapper\gradle-wrapper.properties
//这就是之前要修改的GRADLE_USER_HOME的原因啦,当然不配置他会自己下载,很慢很慢的
distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
//这里注意修改为我们已经下载的gradle的版本
distributionUrl=https\://services.gradle.org/distributions/gradle-6.1.1-all.zip
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
关于app目录好像没有什么修改的,不过这个文件是我们以后rn学习要用的,应该很重要的。
6、准备运行啦:
不想创建APP测试连接可直接跳过到第七步
为了确定我们是手机已经链接成功,可以用AndroidStudio自己创建一个简单的APP:
这里创建没有科学上网会很慢很慢,但是还是等待一下吧,虽然RN开发是跨平台,android开发的调试android studio还是很有用的。
。。。。。
。。。。。
。。。。。
。。。。。
。。。。。
。。。。。
如果真的很慢可以先关闭as,修改一下builde.gradle,
手机安装成功:
7、真的运行啦:
到现在证明手机连接没问题,开始运行rn程序:
cmd切换到项目文件夹
输入:
yarn android
成功的输出:
手机运行效果:
这个是nodeJS的窗口文件代表web服务在连接状态,也会打印一些日志,具体还有什么用途接下的学习应该会了解。