加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

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

发布时间:2020-12-15 08:18:01 所属栏目:百科 来源:网络整理
导读:??大家座好,要开车了~~~ ??俺是一个非常谨慎的人,对RN这门技术没有十足的信心之前,是不会直接拿来做新项目的(否则填坑,就能让你哭晕在厕所~)。 ??但是还想要体验 跨平台 + 实时发布 带来的快感,最好不过的方法就是在现有的项目基础上进行改良,集成Re

??大家座好,要开车了~~~

??俺是一个非常谨慎的人,对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'.

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

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

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

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

android { useLibrary 'org.apache.http.legacy' }

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



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

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

defaultConfig { minSdkVersion 16 targetSdkVersion 21 }

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

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

注: 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"
        }
    }
    ...
}

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

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

??这个错误很好理解,就是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"
    }

成功引入,OY!

?重新编译程序,Word天




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

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

???到这里其实我们已经成功了一大步了,喘口气让我们继续填坑,马上就要看到胜利的曙光了(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
结构: more than one library with pachage name xxx

??解决的思路很简单,就是使用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). compile('com.facebook.react:react-native:+@aar') @aar的意思是只把当前的依赖包下载到本地,所有间接依赖不进行引入,这样确实能避免包重复问题。但是会引起下面的新问题,如下图:




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

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

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

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'
    }

??如果大家重试第三种方案之后是可以的,也可以给我留言,网上说只写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);
    }

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


运行程序

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

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

问题一:

Packager can't listen on port 8081

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

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

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

  1. adb reverse tcp:8081 tcp:8081
  2. 如果1不起作用,使用react-native bundle 命令生成好bundle放在assets 中,程序就可以向引用资源一样,使用我的js文件。
  3. 命令同2,将下面的命令写到package.jsonscript中,当执行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/

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

问题三

Duplicate module name: react-native-vector-icons

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

运行程序,成功 !!! 请为自己鼓掌。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读