ReactNative for Android入坑(一)
最近找工作发现有些公司要求会ReactNative,决定入坑。
-
搭建环境:官网详细的教程附链接。
- 坑一:FQ,建议整个搭建过程中FQ。(FQ链接,注册有200M试用流量,环境搭建够了)
第一步:安装Chocolatey,管理员运行cmd,输入指令:
Chocolatey安装官网指令:@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"
第二步:安装node.js ,指令:choco install nodejs.install
第三步:安装python,指令:choco install python2第四步:安装ReactNative的命令行界面,指令:npm install -g react-native-cli
以下是AndroidStudio的配置过程,由于我早已配置不再提。
- 坑一:FQ,建议整个搭建过程中FQ。(FQ链接,注册有200M试用流量,环境搭建够了)
-
运行第一个程序:官网教程(链接同搭建环境)。
- 坑二:初始化项目,默认cmd的cd的文件夹。
第一步(可忽略):cmd命令行切换到创建项目的目标文件夹。
第二步:创建一个名为AwesomeProject的项目:react-native init AwesomeProject
第三步:切入AwesomeProject项目内:cd AwesomeProject
第四步:运行AwesomeProject程序:react-native run-android - 坑三:第四步过程要FQ,下载gradle。
- 坑四:下载的gradle后,debug.apk可能不能安装到手机。
解决方法:我以项目AwesomeProject为例,找到项目AwesomeProject,进入AwesomeProject文件夹,进入android文件夹,找到buidle.gradle,以文本形式打开,找到以下代码:
1 dependencies { 2 classpath 'com.android.tools.build:gradle:1.3.1' 3 4 // NOTE: Do not place your application dependencies here; they belong 5 // in the individual module build.gradle files 6 }
改为:
1 dependencies { 2 classpath 'com.android.tools.build:gradle:1.2.3' 3 4 // NOTE: Do not place your application dependencies here; they belong 5 // in the individual module build.gradle files 6 }
再运行第四步。
- 坑五:安装成功,红屏报错,Could not get BatchedBridge
cmd中指令:adb shell input keyevent 82弹出的Developer Menu 中选择:Dev Settings
Dev Settings中选择:Debug server host for device对话框中填入IP地址和端口:如 10.0.0.1:8081
返回Developer Menu,选择Reload JS (我没有直接返回到Developer Menu只好:adb shell input keyevent 82)
等待应用重启。
(程序完成后提示的另外一种进入Developer Menu的方法:摇动手机。我是手机平放,左右晃动,摇出了Menu)
- 坑二:初始化项目,默认cmd的cd的文件夹。
以下申明:
- 我在Windows下安装适合Android的环境,以真机测试,另由于各手机,PC具体设置,配置不同仅供参考。
- 我只介绍自己遇到的情况,不是全部。
- 建议尝试前AndroidStudio配置好ANDROID_HOME,ANDROID_SDK_HOME等变量,不然可能应用安装不到模拟器上。