一、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文件夹里面)
3. 运行报错 com.android.builder.testing.api.DeviceException: com.android.ddmlib.InstallException
安装错误: 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
}
}
修改后运行,出现新的错误提示
修改Gradle Wa'pper 版本为 2.2,原来是2.14.1
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
这个错误在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
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。