一、准备
1、Java SE安装包
2、Android Studio
4、NodeJS
5、Git for Windows软件
说明一下:
我们需要Java开发环境,因为我们这里是开发Android应用。
使用Android Studio是为了Android的SDK。注意的是安装完Android Studio后,记得配置Android SDK环境变量ANDROID_HOME。
安装NodeJS是因为我们需要npm工具,而NodeJS自带npm。
最后的Git,我们会使用Git的shell来运行npm工具。
二、React Native步骤及问题解决
1、安装react-native命令行工具
npm install -g react-native-cli
2、初始化项目
初始化项目,其实就是创建新项目的过程。我这里创建的是一个名为BlueBasket的项目。这个过程有点慢。
react-native init BlueBasket
初始化成功后,项目文件如图:
3、启动项目
进入到项目目录里面后,执行start命令。
cd BlueBasket
react-native start
启动出现上面的信息后,打开下面的链接:
http://localhost:8081/index.android.bundle?platform=android
链接页面如下图说明启动已成功。
4、运行Android项目
保持packager开启,另外打开一个命令行窗口,然后在工程目录下运行。
react-native run-android
如果你是安装我这个教程执行到这里的话,可能会出现下面的问题。
图片问题重点是:
You have not accepted the license agreements of the following SDK components
出现这个问题是因为从Android Gradle plugin 2.2.0开始,gradle会自动加载需要的SDK, build-tools,但是因为没有接受license,导致加载依赖终止。现在我们要做的是让Gradle自动接受所有的license。
license存放在$ANDROID_HOME/licenses下。
- Windows下创建license
mkdir "%ANDROID_HOME%\licenses"
echo |set /p="8933bad161af4178b1185d1a37fbf41ea5269c55" > "%ANDROID_HOME%\licenses\android-sdk-license"
- Linux下创建license
mkdir "$ANDROID_HOME/licenses"
echo -e "\n8933bad161af4178b1185d1a37fbf41ea5269c55" > "$ANDROID_HOME/licenses/android-sdk-license"
解决这问题后,我们启动Android虚拟机或使用USB连接手机。重新运行Android项目。
如果没有启动Android虚拟机或连接手机的话,会出下以下问题。
我使用的是真机测试。APP安装到手机后,出现如下图:
摇晃设备或按Menu键可以打开调试菜单,点击Dev Settings,选Debug server host for device,输入你的正在运行packager的那台电脑的局域网IP加:8081(同时要保证手机和电脑在同一网段,且没有防火墙阻拦),再按back键返回,再按Menu键,在调试菜单中选择Reload JS,就应该可以看到运行的结果了。
成功后如图:
后面我们修改了React Native一些信息后,我们不需要每次都重新运行Android项目,只需要修改后摇一摇reload一下就能显示最新的内容。这 就是React Native热更新。
5、Android Studio 使用
如果你手头上不有Android机子,想使用虚拟机来开发。
Android Studio无需配置,只需import,不过import时候注意目录,是在ReactNative项目根目录的android目录下,否则Android Studio无法编译调试。