搭建第一个RN App的坑

穆鸿卓

2023-12-01

按照官网的知道来

https://reactnative.cn/docs/integration-with-existing-apps/

有几个要点要注意下

由于我是原生创建的安卓项目然后集成官网的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艹蛋了一直出不来。。。

https://blog.csdn.net/qq_32114025/article/details/88638045

遇见

错误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插件环境配置

https://blog.csdn.net/zoujin6649/article/details/88529109

问题：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/93f659655a77

https://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: <输入包版本序号，序号就是上面列表中)前面的数字>

版本绑定完毕后，客户端就应当可以检查到更新并进行更新了。

搭建第一个RN App的坑

"npm ERR! Error: EPERM: operation not permitted"问题解决

code-push 进阶

code-push 大坑来袭

发布安卓应用

发布新的热更新版本

相关阅读

相关文章

相关问答

相关文档