有几个要点要注意下
由于我是原生创建的安卓项目然后集成官网的RN,AS构建的node_modules是与app文件夹同级,而使用init命令构建的是/android/app/。
allprojects {
repositories {
google()
jcenter()
maven {
// All of React Native (JS, Android binaries) is installed from npm
url "$rootDir/node_modules/react-native/android"
//url "$rootDir/../node_modules/react-native/android"
}
}
}
统一依赖
subprojects {
project.configurations.all {
resolutionStrategy.eachDependency { details ->
if (details.requested.group == 'com.android.support'
&& !details.requested.name.contains('multidex') ) {
//统一版本号
details.useVersion "27.1.1"
}
}
}
}
各种环境变量 要注意 其中的一个命令 react-natve 不是内部命令:安装后各种不能用,我TM一直以为是react -native艹蛋了 一直出不来。。。
遇见
错误1:unable to load script from assets ‘index.android bundle’ ,make sure your bundle is packaged correctly or youu’re runing a packager server
解决办法
1.在 /app/src/main 目录下创建一个 assets空文件夹
mkdir /app/src/main/assets
2.在项目根目录运行
init构建的项目使用这个
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/
原生构建的使用这个
react-native bundle --platform android --dev false --entry-file index.js --bundle-output app/src/main/assets/index.android.bundle --assets-dest app/src/main/res/
执行完会自动生成一个index.android.bundle
错误2:React-Native Module HMRClinet is not a registered callable module(calling enable)
解决方案1:确保npm start 执行没问题,然后可以在cmd中使用 来试试。
- adb reverse tcp:8081 tcp:8081
解决方案2:原因就Dev Setting里面设置的IP就是不正确的。(推荐)
手机与电脑用一个wifi,用ipconfig命令查电脑的ip 然后手机中摇一摇,
- 然后选择 "Dev Settings",
- 然后正确配置 "Debugging" 里面的 "Debug server host & port for device",即正确配置packger的监听IP以及端口。
- 例如:172.xx.xx.xx:8081
react native 调试
1.chrome developer tool 不进断点 就打开chrome->pause on exception
2.react native debugger 关闭 chrome developer 手机触发 debug js remote即可
webstorm react-native 自动代码提示
"npm ERR! Error: EPERM: operation not permitted"问题解决
解决方法: 使用win+x,选择命令提示符(管理员),在里面运行命令就好了。
webstorm react插件环境配置
问题:Caused by: org.gradle.internal.exceptions.LocationAwareException: Failed to create parent directory 'C:\Project\RNApp\node_modules\react-native-code-push\android\app\build' when creating directory 'C:\Project\RNApp\node_modules\react-native-code-push\android\app\build\intermediates\check_manifest_result\debug\checkDebugManifest\out'
AS使用管理员运行即可。真TM操蛋。
code-push 进阶
https://www.jianshu.com/p/3f60da14edd9
code-push 热更新中的坑。。。。
1. app:build.gradle 中的 versionName 必须与 code-push 发布的版本号一致才能触发更新。
2.手机使用4g网络。
3.手动根目录下建立bundle文件夹,执行下面命令,生成bundle文件。
react-native bundle --entry-file index.js --bundle-output ./bundles/index.android.bundle --platform android --assets-dest ./bundles --dev false
4.发布热更新包。
code-push release RNApp ./bundles/ 1.1.1 --deploymentName Staging --description "更新1.1.1" --mandatory true
手机上的appVersion:1.1.1 所以热更新包必须为1.1.1 要不无法触发更新。
5.js中集成codepush时
import codePush from 'react-native-code-push' 提示根目录上层目录无此模块,最后重装code-push模块解决。
6.详细集成code-push步奏:https://www.jianshu.com/p/93f659655a77https://bbs.reactnative.cn/topic/725/code-push-%E7%83%AD%E6%9B%B4%E6%96%B0%E4%BD%BF%E7%94%A8%E8%AF%A6%E7%BB%86%E8%AF%B4%E6%98%8E%E5%92%8C%E6%95%99%E7%A8%8B
7.回滚操作
回滚 code-push rollback <appName> [Production/Staging...] --targetRelease v4(codepush服务部署的版本号)
code-push rollback RNApp Staging --targetRelease v5
之前是v6版本 执行回滚后会生成v7 但是代码是v5的
可使用命令查看
//历史部署
code-push deployment history RNApp Staging
//当前部署
code-push deployment ls RNApp
//查看 deploymentKey
code-push deployment ls YourApp -k
8.code-push Staging及Production注意事项
codePush.sync中的 deploymentKey 在打release和debug包时记得更换,然后重新打进assets中,这个会影响接收到热更新请求。
在app的build.gradle中分别定义 debug(Staging)\release(Production) 分别定义 CODEPUSH_KEY 别忘了添加包引用
.addPackage(new CodePush(BuildConfig.CODEPUSH_KEY, getApplicationContext(), AppUtils.isDebug()))
code-push 大坑来袭
1.在打release包的时候才是真正的大坑,调用assembleRelease卡在{-react-native-code-push -bundleReleaseJsAndAssets)
使用代码跳过之后报错:找不到node_modules/script/xxxxxx.js的问题,这个问题是Windows平台下的路径引起的。修改方式为:进入到react-native-code-push/android/codepush.gradle文件
解决方案:
android.applicationVariants.all { variant ->
def nodeModulesPath;
if (config.root) {
nodeModulesPath = Paths.get(config.root, "/node_modules");
} else if (project.hasProperty('nodeModulesPath')) {
nodeModulesPath = project.nodeModulesPath
} else {
//nodeModulesPath = "../../node_modules";
//nodeModulesPath = "../node_modules";
//关键时刻 就上绝对路径!
nodeModulesPath='C:/Project/RNApp/node_modules';
}
同时要改react.gradle文件
def reactRoot = file(config.root ?: "C:/Project/RNApp/")
//def reactRoot = file(config.root ?: "../../")
//def inputExcludes = config.inputExcludes ?: ["android/**", "ios/**"]
//这里添加.gradle文件夹下的所有文件 均被excludes掉 task通过
def inputExcludes = [".gradle/**","android/**", "ios/**"]
def bundleConfig = config.bundleConfig ? "${reactRoot}/${config.bundleConfig}" : null ;
之后还会报 Duplicate resources
继续改react.gradle afterEvaluate函数中 添加
// Create dirs if they are not there (e.g. the "clean" task just ran)
doFirst {
jsBundleDir.deleteDir()
jsBundleDir.mkdirs()
resourcesDir.deleteDir()
resourcesDir.mkdirs()
}
//这里 是新增代码块
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()
}
集成Pushy
https://github.com/reactnativecn/react-native-pushy/blob/master/docs/guide.md
常用操作命令
发布安卓应用
首先参考文档-生成已签名的APK设置签名, 然后在android文件夹下运行./gradlew assembleRelease
,你就可以在android/app/build/outputs/apk/app-release.apk
中找到你的应用包。
然后运行如下命令
$ pushy uploadApk android/app/build/outputs/apk/app-release.apk
即可上传apk以供后续版本比对之用。
随后你可以选择往应用市场发布这个版本,也可以先往设备上直接安装这个apk文件以进行测试。
发布新的热更新版本
你可以尝试修改一行代码(譬如将版本一修改为版本二),然后生成新的热更新版本。
$ pushy bundle --platform <ios|android>
Bundling with React Native version: 0.22.2
<各种进度输出>
Bundled saved to: build/output/android.1459850548545.ppk
Would you like to publish it?(Y/N)
如果想要立即发布,此时输入Y。当然,你也可以在将来使用pushy publish --platform <ios|android> <ppkFile>
来发布版本。
Uploading [========================================================] 100% 0.0s
Enter version name: <输入版本名字,如1.0.0-rc>
Enter description: <输入版本描述>
Enter meta info: {"ok":1}
Ok.
Would you like to bind packages to this version?(Y/N)
此时版本已经提交到update服务,但用户暂时看不到此更新,你需要先将特定的包版本绑定到此热更新版本上。
此时输入Y立即绑定,你也可以在将来使用pushy update --platform <ios|android>
来使得对应包版本的用户更新。 除此以外,你还可以在网页端操作,简单的将对应的包版本拖到此版本下即可。
Offset 0
1) FvXnROJ1 1.0.1 (no package)
2) FiWYm9lB 1.0 [1.0]
Enter versionId or page Up/page Down/Begin(U/D/B) <输入序号,U/D翻页,B回到开始,序号就是上面列表中)前面的数字>
1) 1.0(normal) - 3 FiWYm9lB (未命名)
Total 1 packages.
Enter packageId: <输入包版本序号,序号就是上面列表中)前面的数字>
版本绑定完毕后,客户端就应当可以检查到更新并进行更新了。