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/"

需要注意：

路径需要和自己项目的路径一致。
有的是 index.android.js，看看自己创建的是不是这个名字，还是 index.js。
没有assets文件夹，需要手动创建一下，搜索有说index.android.bundle也需要手动先创建。
activity里创建的

ReactRootView?.startReactApplication(mReactInstanceManager, "RnTestProject", null)

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

在项目的 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 getPackages() {
  return Arrays.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. (/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 版本
                }
            }
        }
    }
}

RN的坑

1.

2.

3.

4.

5.

6.

7.

8.

9.

10.

11.

12.

13.

14.

15.

16. Can't find variable: CodePush

17.

18

你可能感兴趣的:(RN的坑)