一、Create React Native App 快速创建 React Native 应用

Create React Native App 是由 Facebook 与 Expo 联合开发的用于快速创建 React Native 应用的工具

$ npm i -g create-react-native-app
$ create-react-native-app my-project
$ cd my-project
$ npm start

在 Expo 移动端应用中扫描二维码,即可以开始远程调试

Expo 打包工具
npm install -g exp
exp start 命令来启动 Expo 打包工具
exp build:android 或者 exp build:ios 分别构建 Android 或者 iOS 独立应用
参考文章 链接描述

二、需要搭建开发环境的 react-native

环境搭建参考官网教程搭建开发环境

遇到过的问题:

1. 运行 react-native run-android 报错

> Unable to load script from assets 'index.android.bundle'. Make sure your bundle is packaged correctly or you're running 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文件夹下多出两个文件
第三步:重新run程序。 react-native run-android

总结:
这个index.android.bundle毫无疑问就是用来调用原生控件的js脚本,每次当你改变了 index.android.js,你都需要使用上面的代码片段,来及时的更新index.android.bundle,然后打包才可以把新的index.android.js应用上,所以当没有index.android.bundle文件时,RN是无法运行的.

2. 在android设备上运行,无法安装

开启USB调试初次安装时还是报错,输入adb devices 提示不是可执行的命令
解决方法:配置环境变量 Path ,填入 adb.exe 所在文件路径(在sdk文件夹里面)

clipboard.png

3. 运行报错 com.android.builder.testing.api.DeviceException: com.android.ddmlib.InstallException

clipboard.png

安装错误: Gradle 的编译版本过高, 不兼容部分5.0+手机, 需要降低版本为 1.3.
使用 Android Studio 打开 React Native 的项目, 修改最外层工程的 build.gradle 配置, 降低 gradle的 build 为1.2.3版本.

buildscript {
    repositories {
        jcenter()
        mavenLocal()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:1.2.3' // 修改1.2.3
        classpath 'de.undercouch:gradle-download-task:2.0.0'

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

修改后运行,出现新的错误提示
clipboard.png

修改Gradle Wa'pper 版本为 2.2,原来是2.14.1
clipboard.png

1. 新错误

com.android.ide.common.process.ProcessException: org.gradle.process.internal.ExecException: Process 'command 'C:Program FilesJavajdk1.8.0_144binjava.exe'' finished with non-zero exit value 2
clipboard.png
这个错误在app的build.gradle里面添加下面这句就好了

android {
   
    defaultConfig {
        ...
        multiDexEnabled true
    }

}

1. 报错 Execution failed for task ':RNTester:android:app:packageAllDebugClassesForMultiDex'. > java.util.zip.ZipException: duplicate entry: android/support/v4/R.class
clipboard.png


豆豆
111 声望5 粉丝