react-native windows下环境搭建和现阶段开发测试问题汇总(持续更新)

环境搭建 基于windows10

安装java

jdk最好1.8以上 java jdk下载连接

并且配置系统环境变量
配置方法
win10 JAVA 环境配置

配置成功的标志是 在cmd 下输入 java 和javac 都有对应的提示

安装SDK

注意是系统环境变量
这里注意配置 安卓环境变量ANDROID_HOME，如果不配置有可能在打包的时候提示找不到sdk

     //示例
   ANDROID_HOME：Android SDK Manager的位置 例如：（ANDROID_HOME=> E:\android\sdk）设置环境变量PATH：例如：（PATH=> %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools）

win10 中 PATH 不识别 %ANDROID_HOME% 所以配置为前面的路径

安装android Studio

并且配置对应的包管理
进入 SDK manager (File => settings=>Appearance&Behavior=>System Settings=>Android SDK)

SDK Platforms : 勾选 Android 6 7 8 都可以 一般6 就可以了
SDK Tolls : 勾选 Android SDK Build-Tools | Android Emulator | Android SDK Platform-Tools | Android SDK Tools | Documentation for Android SDK | Intel x86 Emulator Accelerator | Support Repository》 Android Support Respository 和 Google Repository

安装node

过程略

安装git

过程略

使用react-native-cli 初始化项目

使用npm 包或者yarn 等包管理安装全局 或者本地 cli

npm install -g  react-native-cli

创建RN 项目

//在你想要初始化的目录操作
react-native init xxxx(项目名称)
//这里需要等待一段时间，可能需要翻墙

RN 主要命令

 react-native start:启动RN 服务
 react-native run-ios
 react-native run-android 
//两个run命令会在虚拟机或者实体机上安装程序并且自动启动start 服务

首次进入可能报错 ，Ctrl+M 或者摇一摇设置开发环境,设置 Debug server host & port for device，你的IP:8010,请确保手机和电脑在同一内网段

如果出现Welcome to React Native 表示成功！进行RN 开发吧

首次开发调试中可能遇到的问题

在嵌入原有原生APP 项目的时候，使用虚拟机提示 （Device supports x86,armeabi-v7a,but APK only supports armabi）

导致这个原因是build.gradle 文件配置问题
找到对应Module:你的APP 下的build.gradle 文件

修改配置

ndk{
    abiFilter 'armeabi'
}

改为

ndk{
    abiFilter 'armeabi','x86'
}

这里还有一种配置 具体看提示 增加

在使用Android Studio虚拟机的时候在intel集成显卡情况下可能会出现（提示GPU 错误，虚拟机无法启动

[GPU Driver Issue. some users have experienced emulator stability issues with this driver version]

处理方法，到虚拟机的安装目录，通过命令行强制启动

• 1.找到SDK Emulator文件夹(默认位置 C:\Users\username\AppData\Local\Android\Sdk\emulator)
• 2.在空白处 Ctrl+Shift+鼠标右键 打开命令窗口
• 3.输入 emulator -list-avds （会显示你创建了的虚拟机）
• 4.输入 emulator -avd 上面列出的某一个你想用的虚拟机 -gpu host(for the forced-choice hardware gpu)

Android Studio 在使用虚拟机调试时开启了热更新后 tinker 报错

Error:A problem occurred configuring project ':app'. Failed to notify project evaluation listener. Tinker does not support instant run mode, please trigger build by assembleDebug or disable instant run in 'File->Settings...'. can't find tinkerProcessDebugManifest, you must init tinker plugin first!

tinker不支持instant run模式，你需要找到File->Settings->Build,Execution,Deployment->instant run并关闭，日常调试可以tinker关闭来使用instant run。

具体查看

在使用没有使用Android Studio打开过项目 直接使用其他IDE 可能会报错(React Native android build failed. SDK location not found)

SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.

• 1.使用Android Studio 打开一次Android 文件目录,第一次会加载一段时间，
• 2.手动创建 local.properties
• • 操作方法 *
  • 1.找到 react-native项目下的android 文件夹
  • 2.在这个文件夹创建 local.properties 文件
  • 3.在local.properties 文件中写入 sdk.dir = /Users/USERNAME/Library/Android/sdk

红屏报错或者程序崩掉(Could not get BatchedBridge, make sure your bundle is packaged properly)

原因都很多种网上的原因是因为离线包没有打成功(bundlejs没有生成)
这种开发方式是每次react-native 打离线包 然后手动放到原有app下面进行引用开发
这种处理方法点击连接查看

还有一种是自动热更新开发,这个要原生那边配合，因为一个APP 可能嵌套多个RN 项目，所以我们这边现有的方式是
APP 那边写了一套公共方法动态的更具RN 路由协议来取jsbundle 包名字，但在RN的 start 命令他默认的名字是index.android和index.ios所以需要在公共方法中动态判断

目前我们这边遇到这个问题就是 以前APP 那边写的公共方法没有自动判断环境，需要手动去改CommonRNPage.java这个文件里面的注入bundle包名字的方法注释部分代码