RN的坑

1.
Application NaticeHybrid has not been registered.This is either due to a require() error during initialization or failure to call AppRegistry.registerComponent.
AppRegistry.registerComponent('RnTestProject', () => HelloWorld);

Activity里getMainComponentName的return返回值要和RN注册值"RnTestProject"保持一致

2.
Caused by: java.lang.UnsatisfiedLinkError: could find DSO to load: libreactnativejni.so

Android不能同时加载32和64位本机库。 如果您至少有一个依赖库使用ARM64支持编译的扩展,而另外一些依赖库仅支持ARM32,就会出现问题。 系统将检测ARM64依赖关系,加载它,然后拒绝加载仅ARM32的so库,就可能导致应用程序崩溃。

需要修改app的build.gradle,将ndk,packagingOptions配置一下

defaultConfig {
        applicationId "com.ghp.rn.rntestproject"
        minSdkVersion 19
        targetSdkVersion 25
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
        ndk{
            abiFilters "armeabi-v7a","x86"
        }
        packagingOptions {
            exclude "lib/arm64-v8a/libimagepipeline.so"
        }
    }
3.

在原生应用调转到RN页面的时候,会出现大概1s的白屏现象.
解决方法:把创建ReactRootView以及获取jsbundle的操作放入到Native代码中,比如放置到启动页或者跳转到RN界面的前一个页面等等.总之保证打开的时候已经缓存OK
待测试!

4.
Brownfield | Stetho | “:com.facebook.stetho:stetho-okhttp:1.2.0' depends on one or more Android Libraries but is a jar”

Add to dependencies:

compile ("com.facebook.react:react-native:+") {
    exclude group:'com.facebook.stetho', module:'stetho'
  }
5.
can’t find \node_modules\react-native\local-cli\cli.js

重新npm install,把缺少的东西安装上

6.
Could not find property’JIMU_RELEASE_STORE_FILE’* on SigningConfig_Decorated{name=release, storeFile=null, storePassword=null, keyAlias=null, keyPassword=null, storeType=null}. 

删除掉android/app/build.gradle 里的:

storeFile file(MYAPP_RELEASE_STORE_FILE) 
storePassword MYAPP_RELEASE_STORE_PASSWORD 
keyAlias MYAPP_RELEASE_KEY_ALIAS 
keyPassword MYAPP_RELEASE_KEY_PASSWORD
7.
“npm notice created a lockfile as package-lock.json. You should commit this file.” How to commit it?

git add --all, git commit -m "commit" 忽略过

8.
Exception in native call from JS 
java.lang.RuntimeException: ReferenceError: Can’t find variable: __fbBatchedBridge

这个纠结了很久

在package.json里配置

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

需要注意:

  1. 路径需要和自己项目的路径一致。
  2. 有的是 index.android.js,看看自己创建的是不是这个名字,还是 index.js。
  3. 没有assets文件夹,需要手动创建一下,搜索有说index.android.bundle也需要手动先创建。
  4. activity里创建的
ReactRootView?.startReactApplication(mReactInstanceManager, "RnTestProject", null)

第二个参数moduleName需要合RN注册的值"RnTestProject"保持一致。

  1. 在项目的 build.gradle 文件中为 React Native 添加一个 maven 依赖的入口,必须写在 "allprojects" 代码块中:
allprojects {
    repositories {
        ...
        maven {
            // All of React Native (JS, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
    }
    ...
}

确保依赖路径的正确!以免在 Android Studio 运行Gradle同步构建时抛出 “Failed to resolve: com.facebook.react:react-native:0.x.x" 异常。
node_modules已经在根目录的话,需要去除../
当项目和node_modules不在一起的时候可以使用绝对路径 。

执行完之后,查看手机或者模拟器是否和你的RN服务端在同一个局域网内
在执行 npm run bundle-android 时,可能会报IP问题,按着提示 kill -9 ip值,然后 npm start,studio build
发现执行完,index.android.bundle里没有内容,APP运行起来打开依然奔溃,依然提示该错误

curl "http://localhost:8081/index.android.bundle?platform=android" 
-o "android/RnTestProject/app/src/main/assets/index.android.bundle"

执行这句index.android.bundle依然没有内容的话,直接打开http://localhost:8081/index.android.bundle?platform=android
将获取到的内容复制到index.android.bundle里
然后继续重新运行

9.

修改js文件,reload之后没效果:
要解决办法,修改MAX WAIT_TIME变量,项目路径
/node_modules/react-native/packager/react-packager/src/node-haste/FileWatcher/index.js
中的MAX WAIT_TIME值改得更大一些;
const MAX_WAIT_TIME = 120000;
const MAX_WAIT_TIME = 360000; //改大一些以便node服务可以将js的修改打包到bundle文件中。

找到如下代码

key: '_createWatcher',
    value: function _createWatcher(rootConfig) {
      var watcher = new WatcherClass(rootConfig.dir, {
        glob: rootConfig.globs,
        dot: false
      });

      return new Promise(function (resolve, reject) {
        var rejectTimeout = setTimeout(function () {
          return reject(new Error(timeoutMessage(WatcherClass)));
        }, MAX_WAIT_TIME);

        watcher.once('ready', function () {
          clearTimeout(rejectTimeout);
          resolve(watcher);
        });
      });
    }

//修改为

key: '_createWatcher',
    value: function _createWatcher(rootConfig) {
      var watcher = new WatcherClass(rootConfig.dir, {
        glob: rootConfig.globs,
        dot: false
      });

      return new Promise(function (resolve, reject) {

        const rejectTimeout = setTimeout(function() {
          reject(new Error([
            'Watcher took too long to load',
            'Try running `watchman version` from your terminal',
            'https://facebook.github.io/watchman/docs/troubleshooting.html',
          ].join('\n')));
        }, MAX_WAIT_TIME);

        watcher.once('ready', function () {
          clearTimeout(rejectTimeout);
          resolve(watcher);
        });
      });
    }

修改和之后要重启React Packager。
最新的RN已经没有这个这个问题了,只要你启动hot loading,修改js后就会自动加载。

10.
The development server returned response error code: 500 in react-native
tries to require 'react-native', 
but there are several files providing this module. 
You can delete or fix them: ……

找到多余的files,删除后报这个:

Unable to resolve module `react/lib/ReactComponentWithPureRenderMixin` from `/Users/song/Desktop/ReactNativeRouterFlux/node_module s/react-native-experimental-navigation/node_modules/react-addons-pure-render-mixin/index.js`: Module does not exist in the module map or in these directories:

类似这种错误,就是缺少模块,通过

npm i react-addons-pure-render-mixin -S 

命令即可,标记部分是你缺少的模块名。
如果还不行的话,就把node_modules删除,再重新建立

11.
undefined is not an object(evaluating 'HotUpdate.downloadRootDir')

需要在getPackages方法中添加new UpdatePackage();
rn0.29后在Mainapplication中,rn0.29前在MainActivity中:

@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
      new MainReactPackage(),
          new UpdatePackage()
  );
}

记得导包:

import cn.reactnative.modules.update.UpdatePackage;
12.
Error: Cannot find module 'metro-bundler/src/babelRegisterOnly'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/ghp/c_work/RN/AwesomeProject/node_modules/react-native-update/local-cli/lib/bundle.js:439:9)
    at next (native)
    at step (/Users/ghp/c_work/RN/AwesomeProject/node_modules/react-native-update/local-cli/lib/bundle.js:310:191)
    at /Users/ghp/c_work/RN/AwesomeProject/node_modules/react-native-update/local-cli/lib/bundle.js:310:361

将node_modules\react-native-update\local-cli\lib\bundle.js的439行种的metro-bundler改成metro可成功运行;

13.
unable to load script from assets ‘index.android bundle’ ,make sure your bundle is packaged correctly or youu’re runing a packager server
In project directory,

*   `mkdir android/app/src/main/assets`
*   `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 run-android`

14.
uncaughtException:couldn't find DSO to load: libreactnativejni.so

修改app的build.gradle:

defaultConfig {
        ...
        minSdkVersion 16
       ...

        ndk{
            abiFilters "armeabi-v7a","x86"
        }
        packagingOptions {
            exclude "lib/arm64-v8a/libimagepipeline.so"
        }
    }
15.
uncaughtException:Unable to load script from assets 'index.android.bundle'.
Make sure your bundle is packaged correctly or you're running a packager server.

reload之后,变为

Could not connect to development server


看是否启动 npm start,adb是否连接,WiFi是否连接同一个IP,
我是Dev Setting设置IP重启OK的,如图:


设置IP
16. Can't find variable: CodePush

原先demo添加了热更新的逻辑,现在将项目迁移至Android目录夹,实现Android原生页面跳转RN页面,index.js在registerComponent时设置了CodePush,去掉后页面正常打开,热更新如何修改待定


17.

按照官网文档集成到现有原生应用,需要自建ReactRootView,其实ReactActivity已经帮我们做了这些,新建activity直接继承ReactActivity就可以。

ReactInstanceManager.builder()
                .setApplication(application)
                .setBundleAssetName("index.android.bundle")
                .setJSMainModulePath("index")
                ...

在自建ReactRootView时,查看RN源码会发现assets取的路径在assets文件夹,需要在main目录下创建assets文件夹,生成index.android.bundle文件,index.android.map是标识文件,可以不用

在assets文件夹生成index.android.bundle文件,将bundles里的该文件复制过来也可以:

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

console.error:"React Native version mismatch.
JavaScript version:0.54.4
Native version:0.55.3
..."


这个问题需要指定下版本,有2种修改方式:
(参考https://github.com/facebook/react-native/issues/19259)
第一种将app/build.gradle修改

//compile "com.facebook.react:react-native:+"  // From node_modules
compile ("com.facebook.react:react-native:0.55.3") { force = true }// From node_modules

第二种在根目录的build.gradle修改

allprojects {
    repositories {
        ...
    }

    // 版本 指定
    configurations.all {
        resolutionStrategy {
            eachDependency { DependencyResolveDetails details ->
                if (details.requested.group == 'com.facebook.react' && details.requested.name == 'react-native') {
                    details.useVersion "0.55.3" //你当前react native 版本
                }
            }
        }
    }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,793评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,567评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,342评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,825评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,814评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,680评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,033评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,687评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,175评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,668评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,775评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,419评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,020评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,206评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,092评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,510评论 2 343

推荐阅读更多精彩内容