ReactNative环境安装,超详细。

时间:2024-03-24 08:37:30

ReactNative环境安装,超详细。开发自已第一个APP.

ReactNative环境安装,超详细。开发自已第一个APP.

许多人学习react-native放弃的很大一部分原因是一开始环境就让学习者头大,并不是语法或者组件上的问题。

1.移动App,react-native开发环境配置

安装java基本没什么问题,傻瓜式操作,下一步下一步。

安装java jdk和配置环境

安装java基本没什么问题,傻瓜式操作,下一步下一步。
1.修改环境变量,新增JAVA_HOME的系统环境变量,值为C:\Program Files (x86)\Java\jdk1.8.0_121,也就是安装JDK的根目录(jdk安装环境)
ReactNative环境安装,超详细。
2. 修改系统环境变量Path,在Path之后新增%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;

  1. 新建系统环境变量CLASSPATH,值为.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;
    ReactNative环境安装,超详细。
  2. 保存所有的系统环境变量,同时退出系统环境变量配置窗口,然后运行cmd命令行工具,输入javac,如果能出现javac的命令选项,就表示配置成功!
    ReactNative环境安装,超详细。
    ReactNative环境安装,超详细。

安装Node.js环境

注意:需要安装最新的长期稳定版本,不要实验版本;安装完毕之后的node.js会自动配置到全局系统环境变量中
安装完毕后,可以输入node -v查看node版本号,版本最好安装高一点,8点几的版本可能会有问题。

ReactNative环境安装,超详细。

安装Python环境

1.注意:安装Python时候,只能安装2.×的版本,注意勾选安装界面上的Add Python to path,这样才能自动将Python安装到系统环境变量中;

打开环境变量是否自身已经添加ReactNative环境安装,超详细。
2.安装完毕之后,可以在命令行中运行python,检查是否成功安装了python。
ReactNative环境安装,超详细。

配置安卓环境

配置安卓环境,踩坑最多的地方

  1. 安装installer_r24.3.4-windows.exe,最好手动选择安装到空余容量大于50G的盘符下
    ReactNative环境安装,超详细。
  2. 下载,tools,build-tools,extras,platform,platform-tools
    ReactNative环境安装,超详细。
    ReactNative环境安装,超详细。
    ReactNative环境安装,超详细。
  3. 配置安装环境变量:在系统环境变量中新建ANDROID_HOME,值为android SDK Manager的安装路径G:\Android,紧接着,在Path中新增;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;
    ReactNative环境安装,超详细。

ReactNative快速打包

Yarn、React Native的命令行工具(react-native-cli)
Yarn是Facebook提供的替代npm的工具,可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。

npm安装:npm install -g yarn react-native-cli

  1. 在桌面新建文件,我这里命rn2,在rn2目录下运行react-native init hd2 创建React-Native项目
  2. 运行cd hd2切换到项目根目录中
    ReactNative环境安装,超详细。
  3. 在项目hd2中 在android下新建local.properties文件,并写入sdk.dir=G:\Android
    ReactNative环境安装,超详细。
    ReactNative环境安装,超详细。
    4 .在项目hd2中 运行 react-native start命令上,不要关闭。
    ReactNative环境安装,超详细。
    5.打开安卓模拟器,我用的是夜神模拟器,打开后,在hd2下重新开一个powershell, 之前的powershell不要关闭。运行adb connect 127.0.0.1:62001,模拟器一定要开启。 运行命令react-native run-android打包的模拟器。62001是夜神模拟器默认端口。其他模拟器默认端口请自行百度。
    ReactNative环境安装,超详细。
    ReactNative环境安装,超详细。

ReactNative环境安装,超详细。
大功告成了

注意事项

如果在运行命令react-native run-android时出现下面错误提示
error Failed to install the app. Please accept all necessary Android SDK licenses using Android SDK Manager: “$ANDROID_HOME/tools/bin/sdkmanager --licenses”. Run CLI with --verbose flag for more details.
Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081

操作:在安装Android sdk下的/tools/bin/目录下运行sdkmanager --update,一直点y接受 licenses就可以了