React Native 在原生项目中集成之坑点总结

  大家座好，要开车了~~~http://blog.csdn.net/u013531824/article/details/53496011

  俺是一个非常谨慎的人，对RN这门技术没有十足的信心之前，是不会直接拿来做新项目的（否则填坑，就能让你哭晕在厕所~）。

  但是还想要体验跨平台+实时发布带来的快感，最好不过的方法就是在现有的项目基础上进行改良，集成ReactNative框架，一个页面or一个View先使用RN搞起来（先挣它一个亿，慢慢来么，急什么），下面就是本人在Integration With Existing Apps （此处有英文显得高大上一些）的过程中踩得坑，又爬出来的过程，希望能对你有所帮助。

---

集成准备

  这方面网络上有好多的文案可以借鉴，（ReactNative向导），内容主要介绍npm和node的一些安装操作，没有这些基础建设，RN搞不转，如果你使用的是MAC，大致的关系如下：

 

还有就是Android和iOS的开发环境搭建，没什么难度。

  这里特别（记得是特别）需要提醒的地方就是compileSdkVersion及targetSdkVersion的版本问题（站好，要跳坑了）。

  先介绍三个基础的概念：

compileSdkVersion : 定义 Gradle 用哪个 Android SDK 版本编 译应用。 
minSdkVersion ： 定义应用可以运行的最低要求。 
targetSdkVersion： 定义 Android 提供向前兼容的主要依据，如果不更新就不会应该最新版本的行为变化。

  好的，在RN官网介绍中有这么一段文字

Android Studio installs the most recent Android SDK by default. React Native, however, requires the Android 6.0 (Marshmallow) SDK.

  Android 6.0对应API等级是23，为什么需要Android 6.0，因为ReactNative引用了23的资源文件，另外有个别RN方法有23的等级限制。因此compileSdkVersion 23 就必不可免了，如果你性格倔强的话，就会看见下面的错误。

Error retrieving parent for item: No resource found that matches the given name 'xxx'.
1
1

  同理，如果遇到这类问题，也可以检查一下，使用的compileSdkVersion 版本是否正确。

  接下来，通过rebuild 编译程序，如果幸运的话，会看到下面的Gradle Build Message：

Error:错误: 程序包org.apache.http不存在Error:错误: 程序包org.apache.http.message不存在
1
2
1
2

  对的，聪明的你肯定猜到了，Android API 23 移除了HttpClient 相关的类，解决办法如下：

android {    useLibrary 'org.apache.http.legacy'}
1
2
3
1
2
3

  继续开车，此时我们还没有引入任何RN相关的依赖，好的run 一下程序，竟然Crash了，Word天啊，控制台打印出来的内容如下图： 

 Java.lang.SecurityException: xxx was not granted this permission :android.permission.xxx
1
1

  机智的我，祭出了Google神器，最终定位到了targetSdkVersion 23 ，在上面已经介绍过三个sdkVersion的区别，targetSdkVersion 如果升级，自动认为新版本的行为特性将生效，SDK 23中为了提高Android系统的安全性，Android开发小组进行了安全权限的重构，如果你没有做适配，原来能够正常运行的代码将可能Crash。 
  如果你还没有做好，应用权限全面升级的准备的话，建议的填坑方案如下：

 defaultConfig {        minSdkVersion 16        targetSdkVersion 21 }
1
2
3
4
1
2
3
4

  车不能停，关注minSdkVersion 16 代码，这是能运行RN程序的最小SDK版本，作为一个大型应用，如果最小的安装版本定位在Level 16，显然说不过去，朋友介绍了一种解决方案：

<uses-sdk android:minsdkversion="11" android:targetsdkversion="21" tools:overridelibrary="com.facebook.react"></uses-sdk>
1
1

注： tools:overridelibrary 目的是重写react中的最小sdk版本为11

  但是切记小心使用，需要做好sdk版本兼容，小于16的版本，需要使用Native代码实现，或者跳转到空页面，否则会出现Crash。

  ok，集成之前的准备工作，大致的坑点就这么多，如果有其他的坑点，欢迎留言。

---

增加JS到你的应用

  这块非常简单，想遇到坑都很难。建议参考Add JS to your app 官网文档直接搞定。

---

引入react-native依赖

按官方文档搞两件事情，首先添加react-native依赖，其次添加maven的url。

dependencies {    ...    compile "com.facebook.react:react-native:+" // From node_modules.}allprojects {    repositories {        ...        maven {            // All of React Native (JS, Android binaries) is installed from npm            url "$rootDir/../node_modules/react-native/android"        }    }    ...}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

&幸运的事情发生了，编译项目错误提示如下：

Failed to resolve ： com.facebook.react:react-native:xxx
1
1

  这个错误很好理解，就是Gradle在编译的时候，不知道引入的是个什么鬼，所以无法下载相应的dependency。

  尝试：开始以为是当前的react-native版本不在MavenCentral中，所以无法下载，于是打开Project Structure —> Dependencies —> Library Dependency —> 输入‘react-native’，确实给我返回了一个react-native的版本。选择引入后仍然出错（Cry，应该是姿势不对）。

  仔细的阅读官方文档（要说英文官方文档还是挺牛的，好多国内的翻译文章，很缺少细节），发现正确姿势，react-native都是通过npm来安装的。

 

  如果箭头指向的路径错误，将不能正确引入。因为我的应用结构采用的是eclipse的默认结构，所以我的修改方案为：

maven {        url "$rootDir/node_modules/react-native/android"    }
1
2
3
1
2
3

成功引入，OY！

重新编译程序，Word天 

 

  这是部分间接依赖的错误日志，这些是ReactNative引用的开源库，通过compile react-native会将间接依赖编译到程序中。知道少什么就好解决了，推荐的解决办法：

repositories{    jcenter()    mavenCentral()}
1
2
3
4
1
2
3
4

如果你有更好的办法，麻烦给我留言奥~~

  到这里其实我们已经成功了一大步了，喘口气让我们继续填坑，马上就要看到胜利的曙光了（OY）

  通过上面的编译问题中也能看出，ReactNative自带很多的依赖库，这对我们自己的程序来说，如果我们也引用了其中的部分依赖，就很容易造成包重复的问题，比如：

Error:Execution failed for task ':processDebugAndroidTestResources'.> Error: more than one library with package name 'android.support.v7.recyclerview' You can temporarily disable this error with android.enforceUniquePackageName=false However, this is temporary and will be enforced in 1.0
1
2
1
2

结构： more than one library with pachage name xxx
1
1

  解决的思路很简单，就是使用compile（）{ exclude xxx} 排除掉重复的module，但是如何写很有讲究，否则会引发其他的问题。先给出亲测的正确的解决方案如下：

dependencies {    compile('com.facebook.react:react-native:+') {        exclude module: 'recyclerview-v7'        exclude module: 'support-v4'        exclude group: 'com.nineoldandroids', module: 'library'    }}
1
2
3
4
5
6
7
1
2
3
4
5
6
7

完美解决我的问题。下面是做过的错误重试及无效写法总结。

1). compile('com.facebook.react:react-native:+@aar') @aar的意思是只把当前的依赖包下载到本地，所有间接依赖不进行引入，这样确实能避免包重复问题。但是会引起下面的新问题，如下图： 

因为ReactNative需要将所需的资源文件进行引入到当前项目中，如果所有的间接依赖都不进入，就会出现这个问题。

2). 如下的修改方案，将所有的support包进行屏蔽，同样会引发上面的错误。

compile('com.facebook.react:react-native:+') {        exclude group: 'com.android.support' } 
1
2
3
1
2
3

3). 可以说这是一个无效的写法，按着网上的很多文章的说法是ok的，但是我亲试却并没有起作用。

compile('com.facebook.react:react-native:+') {       exclude group: 'com.android.support', module:'support-v4'       exclude group: 'com.android.support', module:'support-v7-recyclerview'    } 
1
2
3
4
1
2
3
4

  如果大家重试第三种方案之后是可以的，也可以给我留言，网上说只写group可以，只写module也可以，都写仍然可以。我验证的结果这种结论是不正确的。

为解决包重复的问题，给大家推荐一个gradle的命令，

./gradlew -q sample:dependencies

 

能查看所有依赖使用的间接依赖及依赖版本。

---

项目中添加RN相关的Native代码

  add-native-code详细讲解向原有项目添加ReactNativeActivity的相关代码，此处无坑，放心使用。

  我在项目中尝试原生的LinearLayout使用ReactNativeView进行填充，把代码贴出来，仅供参考：

    private LinearLayout mReactNativeLayout;    private ReactRootView mReactRootView;    private ReactInstanceManager mReactInstanceManager;    private void initReactView(){        mReactNativeLayout = (LinearLayout) findViewById(R.id.react_native_layout);        mReactRootView = new ReactRootView(mContext);        mReactInstanceManager = ReactInstanceManager.builder()                .setApplication(((Activity)mContext).getApplication())                .setBundleAssetName("index.android.bundle")                .setJSMainModuleName("index.android")                .setNativeModuleCallExceptionHandler(new NativeModuleCallExceptionHandler() {                    @Override                    public void handleException(Exception e) {                    }                })                .addPackage(new MainReactPackage())                .setUseDeveloperSupport(false)                .setInitialLifecycleState(LifecycleState.RESUMED)                .build();        mReactRootView.startReactApplication(mReactInstanceManager,"sampleScreenSaver",null);        mReactNativeLayout.addView(mReactRootView);    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

  有没有很腻害，ReactNative可以在原生的Activity、Fragment、View中任意添加，只要你喜欢。

---

运行程序

千呼万唤屎出来，终于可以运行了。O(∩_∩)O哈哈~

  车开起来，小坑填一下，就能抵达胜利的彼岸了。在这个过程中，我遇到一下几个小问题，我就按我遇到的问题的顺序梳理一下。

问题一：

Packager can't listen on port 8081
1
1

  解决办法：可能是其他的packager正在运行，关闭其他的Pachager即可。 
问题二：

com.facebook.react.devsupport.JSException: Could not get BatchedBridge, make sure your bundle is packaged correctly
1
1

问题原因：没有找到执行的bundle文件。 
解决方案：

1. adb reverse tcp:8081 tcp:8081
2. 如果1不起作用，使用react-native bundle 命令生成好bundle放在assets 中，程序就可以向引用资源一样，使用我的js文件。
3. 命令同2，将下面的命令写到package.json 的script中，当执行npm start 时，会自动打bundle。命令行如下：

$ react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output assets/index.android.bundle --sourcemap-output assets/index.android.map --assets-dest res/
1
1

要根据自己的项目目录结构进行修改。

问题三

Duplicate module name: react-native-vector-icons
1
1

  解决方案：一个Application应用存在多个node_module文件引发的问题，可能在Library中也有node_module可以删除掉其中一个，让另一个去引用已经存在的就OK。

运行程序，成功 ！！！ 请为自己鼓掌。