react native: react-native-cli 创建项目

一、环境配置

node

node下载地址：window选择Windows Installer (.msi)

验证：

C:\Users\able>node -v
v12.18.0

C:\Users\able>npm --version
6.14.4

npm配置

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global


npm install yarn
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

python

python下载地址

二、创建项目

npm uninstall -g react-native-cli

npm install -g react-native-cli

#  初始化一个名字为AwesomeApp的RN项目
react-native init AwesomeApp

报错：

Missing write access to /usr/local/lib/node_modules npm ERR! path /usr/local/lib/node_modules

原因：

文件没有root权限,运行语句前面加上sudo

解决：

sudo npm uninstall -g react-native-cli
sudo npm install -g react-native-cli
sudo react-native init rndemo

三、运行

1、在项目根目录执行命令，运行项目

# 已连接真机或开启模拟器前提下，启动项目
react-native run-android 
# 已连接真机或开启模拟器前提下，启动项目
react-native run-ios 

2、Android studio运行项目

用Android studio打开android目录，然后运行

3、启动服务

# 在项目目录下启动 js service
npm start
# 或
react-native start

四、问题

问题一

* What went wrong:
Task 'installDebug' not found in project ':app'.

解决方法： 配置release签名

参考：Task ‘installDebug’ not found in project ‘:app’.

问题二

E/unknown:ReactNative: Exception in native call
    java.lang.RuntimeException: 
    Unable to load script. 
    Make sure you're either running a Metro server (run 'react-native start') or that 
    your bundle 'index.android.bundle' is packaged correctly for release.

解决方法：

1、在Android/app/src/main目录下创建一个空的assets文件夹

2、项目根目录执行以下命令：

根目录有index.js

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

或

根目录有index.android.js

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/  

• –platform ,平台名称(ios或者android)
• –dev ,设置为false的时候将会对JavaScript代码进行优化处理。
• –entry-file ,ios或者android入口的js名称，比如index.js(老版本的RN项目的默认入口文件是index.ios.js , index.android.js)
• –bundle-output, 生成的jsbundle文件的名称，比如./ios/bundle/index.jsbundle (老版本的RN项目是区分iOS和android的，要改为index.ios.jsbundle)
• –assets-dest 图片以及其他资源存放的目录,比如./ios/bundle

参考：React Native Android打包详解

执行后效果图：

问题 : 生成签名警告（可忽略）

Key was created with errors:

Warning:

JKS 密钥库使用专用格式。

建议使用 “keytool -importkeystore -srckeystore C:\Users\able\Desktop\test111.jks -destkeystore C:\Users\able\Desktop\test111.jks -deststoretype pkcs12” 迁移到行业标准格式 PKCS12。

解决方法：

命令行执行即可：

keytool -importkeystore -srckeystore C:\Users\able\Desktop\test111.jks -destkeystore C:\Users\able\Desktop\test111.jks -deststoretype pkcs12

问题：

参考：

React Native : Error: Duplicate resources - Android

react native中一次错误排查 Error:Error: Duplicate resources

配置好release的签名，gradle执行installRelease报错 ：

React Native : Error: Duplicate resources - Android

解决方法：

• 步骤一：

app 的build.gradle中有这行：

apply from: "../../node_modules/react-native/react.gradle"

找到这个文件，并找到文件中的 doFirst ,然后在下边添加以下代码：

doLast {
    def moveFunc = { resSuffix ->
        File originalDir = file("$buildDir/generated/res/react/release/drawable-${resSuffix}");
        if (originalDir.exists()) {
            File destDir = file("$buildDir/../src/main/res/drawable-${resSuffix}");
            ant.move(file: originalDir, tofile: destDir);
        }
    }
    moveFunc.curry("ldpi").call()
    moveFunc.curry("mdpi").call()
    moveFunc.curry("hdpi").call()
    moveFunc.curry("xhdpi").call()
    moveFunc.curry("xxhdpi").call()
    moveFunc.curry("xxxhdpi").call()
}

• 步骤二：删除以下两个文件夹中的文件

android/app/src/main/res/drawable
android/app/src/main/res/raw

问题：怎么动态运行项目

Android studio安装debug和release都没问题后，用webstrom打开项目，

安装项目：

react-native run-android 

启动服务：

react-native start

然后修改代码了，就按r ： app重新加载

To reload the app press “r”

To open developer menu press “d”

查看日志

# 在android studio查看日志
react-native log-android

# 在Xcode查看日志
react-native log-ios