react-native环境搭建,真机测试,遇到BUG以及解决方案

大家好,好久没有更新博客了,小苏几天研究了一个下午的react-native的环境搭建 在这过程中遇到了许多的问题,希望在这里给大家讲解一下遇到的问题跟解决问题的方案!
首先这里是官方给出的基础步骤
react-native环境搭建,真机测试,遇到BUG以及解决方案

一定要全局安装react-native  
	npm install -g yarn react-native-cli
	
全局安装完react-native之后
	下面我们就可以开始安装 Android Studio
	国外的网站我们要翻墙才可以进去下载,我们可以自己百度去下载,比较简单这里就不多说了

安装了react-native之后我们就打开它
react-native环境搭建,真机测试,遇到BUG以及解决方案
这时候我们就点击右下角的Configure 然后选中 SDK Manager
react-native环境搭建,真机测试,遇到BUG以及解决方案

react-native环境搭建,真机测试,遇到BUG以及解决方案

react-native环境搭建,真机测试,遇到BUG以及解决方案

我们选择红色箭头的 Show Package Details

react-native环境搭建,真机测试,遇到BUG以及解决方案

react-native环境搭建,真机测试,遇到BUG以及解决方案

然后我们就可以点击Apply去自行下载了

然后我们就去设置系统的环境变量
react-native环境搭建,真机测试,遇到BUG以及解决方案

变量值就是你SDK的安装目录
默认的安装目录是:c:\Users\你的用户名\AppData\Local\Android\Sdk
现在就暂时告一段落了;

下面我们就开始安装JDK Java SE Development Kit (JDK)
下载地址:(按照你电脑的环境安装相对应的文件)
https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

安装完之后我们就去设置环境变量

变量名:JAVA_HOME
变量值:C:\Program Files (x86)\Java\jdk1.8.0_91 // 要根据自己的实际路径配置
变量名:CLASSPATH (注意:如果使用1.5以上版本的JDK,不用设置CLASSPATH环境变量,也可以正常编译和运行Java程序。)
变量值:.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar; //记得前面有个"."
变量名:Path
变量值:%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;

例子:JAVA_HOME的变量值需要是你自己电脑安装的JDK的路径
react-native环境搭建,真机测试,遇到BUG以及解决方案
react-native环境搭建,真机测试,遇到BUG以及解决方案
react-native环境搭建,真机测试,遇到BUG以及解决方案

下面我们就来创建一个react native的项目

在你的当前文件目录下打开控制台

Windows 用户请注意,请不要在某些权限敏感的目录例如 System32 目录中 init 项目!会有各种权限限制导致不能运行!
react-native环境搭建,真机测试,遇到BUG以及解决方案

下面我们就来启动这个项目
cd 你的项目名称
在当前目录下执行 react-native run-android

注意一点,在创建我们的项目的时候就不会出现 index.android.js这个文件的所以我们要直接复制index.js的代码重新创建一个index.android.js这个文件将代码粘贴进去
react-native环境搭建,真机测试,遇到BUG以及解决方案

出现的报错解决方案:

unable to load script from assets ‘index.android bundle’
在Android手机上运行React-native项目时

报错:unable to load script from assets ‘index.android bundle’ ,make sure your bundle is packaged correctly or youu’re runing a packager server

解决方案:

第一步:在 android/app/src/main 目录下创建一个 assets空文件夹

第二步:执行 下面这段命令

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
会发现 assets文件夹下多出一个文件

react-native环境搭建,真机测试,遇到BUG以及解决方案

第三步:重新run程序。

当出现react-native打包失败app:installDebug FAILED的报错时

在android/app/build.gradle加入下面这段代码
android {
compileSdkVersion 23
buildToolsVersion “23.0.1”
aaptOptions.cruncherEnabled = false
aaptOptions.useNewCruncher = false

react native之A problem occurred configuring project ‘:app’报错的解决方法
react-native环境搭建,真机测试,遇到BUG以及解决方案
在react native项目中的 Android 文件夹下创建一个名为 local.properties 的文件(创建一个普通的txt文本文件,然后重命名为local.properties就行),用记事本打开,写入以下内容:

sdk.dir=你本地Android SDK文件夹路径,注意,路径中的所有单斜线\应该写成双斜线\
比如:sdk.dir=D:\AndroidSDKLocation

保存后再次执行 react-native run-android 即可。

好了今天的问题就到这里了,喜欢小苏的可以给小苏点个赞关注一下