React-native 运用原生(ios, android)第三方sdk

2024年5月1日 633次阅读 来源: wangcong

React-native 运用native第三方sdk

ios(以阿里百川用户反应为例)

  1. 起首装置cocopods(类似于npm，ios开辟的依靠管理工具，教程：http://www.code4app.com/artic…

  2. 在ios根目录下竖立Podfile文件，增加以下代码(运用的是百川feedback1.1.1版本)，然后实行pod install敕令

    target ‘Xss’ do 
       pod 'YWFeedbackFMWK', '~> 1.1.1'
    end

  1. pod装置完成后，运用xcode翻开Xss.xcworkspace(我的项目名是Xss)，在项目中竖立BCBridge.h以及BCBridge.m文件，以竖立js和原生的bridge，.h文件只是个头文件，.m文件代码以下
    在这里扼要引见下ios下的controllerView切换机制，controllerView 切换主要有两种，push和present，个中，push必需在一致UINavigationController发作，push的动画表现为横向切入，present的动画为底部向上切入(类似于弹窗)，因为react-native自身处于一个UINavigationController中，然后我现在还没有找到能向这个UINavigationController中push的要领，所以这里采纳的是present的体式格局。

因为这类controller切换在oc里限定比较多，且运用他人的viewController可自定义的部份太受限，所以不是很引荐这类体式格局。


#import "RCTBridge.h"
#import "RCTEventDispatcher.h"
#import "RCTRootView.h"
#import "BCBridge.h"
#import "YWFeedbackFMWK/YWFeedbackKit.h"

static YWFeedbackKit *feedbackKit;        // 声明一个阿里百川feedback对象

@interface BCBridge ()
@property (nonatomic, strong) UINavigationController *navi;

@end

@implementation BCBridge

+(void)initialize {
  // 运用在百川背景请求的appkey来初始化feedbackKit
  feedbackKit = [[YWFeedbackKit alloc] initWithAppKey: @"yourappkey"];
}

// 竖立Bridge，在js中直接运用
RCT_EXPORT_MODULE(BCBridge);

// 在js中挪用时函数名为BCFeedback
RCT_EXPORT_METHOD(BCFeedback: (NSDictionary *)style) {
  // 自定义的款式注入，style变量为NSDictionary范例的，有js要领挪用时传入，js中表现为Object
  feedbackKit.customUIPlist = style;
  // 将present操纵提升到主历程来做(这里我也不太懂oc)，这里百川1.0的feedback必需如许做才切换过去，2.0不存在这个题目
  dispatch_async(dispatch_get_main_queue(), ^{
      // 挪用阿里百川供应的初始化要领，此要领接收一个回调函数，默许参数为初始化后的viewController
    [feedbackKit makeFeedbackViewControllerWithCompletionBlock:^(YWLightFeedbackViewController *viewController, NSError *error) {
        // 竖立一个新的UINavigationController以阿里百川返回的viewController为RootViewController
      UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:viewController];
      // 将此controller设为当前域，能够退出
      self.navi = nav;
      // 设置title
      viewController.title = @"看法反应";
      // 设置封闭按钮
      viewController.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"封闭" style:UIBarButtonItemStylePlain target:self action:@selector(back)];
      // 实行present操纵(此view将从屏幕下方向上切入)
      [[UIApplication sharedApplication].delegate.window.rootViewController presentViewController:nav animated:YES completion:nil];
    }];
  });
}

// 声明退出函数
- (void)back
{
  [self.navi dismissViewControllerAnimated:YES completion:nil];
}
@end

js中挪用

import {
  NativeModules
} from 'react-native'

NativeModules.BCBridge.BCFeedback(options)

  1. 至此，封装终了，然则这类体式格局并不友爱，而且也不符合react-native一致ui的头脑，所以发起运用此种体式格局来封装第三方sdk的要领(猎取数据)，然后运用react-native完成一套一致的ui(既可用于android也可用于ios)。但阿里百川并没有供应直接猎取数据的要领，所以挑选sdk时一定要郑重。

android

  1. 根据官方文档下载对应版本的sdk(这里运用的是1.1.3版本的)

  2. 在app下竖立libs文件夹(假如没有的话)，将sdk中文件放进去，将项目根目录下的build.gradle文件对应位置增加以下语句

allprojects {
    repositories {
        ...
        flatDir {
            dirs 'libs'
        }
        ...
    }
}

在app目录下的build.gradle文件对应位置增加以下语句
有个大坑是因为阿里百川feedbackSdk默许运用multidex形式编译，假如不在项目中做对应设置，会致使一向编译不经由过程，看了无数种处理办法才处理此题目，泪崩~~~~

    defaultConfig {
        ...
        multiDexEnabled true                         // 开启multidex形式编译，此处为大坑，不然编译不过
    }
dependencies {
    ...
    compile 'com.android.support:multidex:1.0.0'     // 此依靠用于开启mulidex形式编译
    compile(name: 'feedbackSdk', ext: 'aar')
    compile files('libs/securityguard-3.1.27.jar')
    compile files('libs/utdid4all-1.0.4.jar')
    compile files('libs/alisdk-ut-5.jar')
}

  1. 初始化
    在MainActivity类中的onCreate要领中增加以下语句(假如FeedbackAPI没法引入，申明sdk依靠为增加胜利，请搜检上一步)

        MultiDex.install(this);      // 一样是开启multidex形式编译，网上大部份处理方案都没提这个设置，泪崩~~~~
        FeedbackAPI.initAnnoy(this.getApplication(), "yourappkey");    // 初始化阿里百川看法反应

  1. 封装activity切换要领
    竖立BCBridge类(注重引入对应依靠)

详细代码以下

public class BCBridge extends ReactContextBaseJavaModule {

    public BCBridge(final ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @Override
    public String getName() {
        // 设置在js中挪用的类名
        return "BCBridge";
    }

    // 在js中挪用的要领名一样为BCFeedback，readableMap对应js中的Object
    @ReactMethod
    public void BCFeedback(ReadableMap map) {
        ReadableNativeMap middleMap = (ReadableNativeMap) map;
        // 将ReadableMap转化为hashMap
        Map nativeMap = middleMap.toHashMap();
        // 设置部份ui款式
        FeedbackAPI. setUICustomInfo(nativeMap);
        // 切换到阿里百川反应界面
        FeedbackAPI.openFeedbackActivity(getReactApplicationContext());
    }
}

  1. 竖立BCBridgePackage
    将上一步封装的要领集成到运用中(我是如许明白的)

    public class BCBridgePackage implements ReactPackage {
@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
    return Arrays.<NativeModule>asList(
            new BCBridge(reactContext)
    );
}

@Override
public List<Class<? extends JavaScriptModule>> createJSModules() {
    return Collections.emptyList();
}

@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
    return Collections.emptyList();
}
}

    同时在MainApplication中对应位置增加以下代码(假如援用一些他人封装好的rn-原生组件，经由过程rn link 也能完成此操纵，然则手动变动此文件时可能会致使一些情况下rn link失效，请注重搜检)

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

  1. 对照于oc，java的代码好明白些，然则运用android的activity一样会有ios中提到的题目。

总结(个人心得)

因为上面提到的封装原生的页面(ios中体现为viewController，android中体现为activity)，所以不首倡直接去运用他人集成好的viewController和activity，比较首倡运用这类体式格局来集成原生中的要领或者是组件，然后用rn来完成团体的ui规划，如许在开辟本钱上以及性能上都能获得很大的进步。

    原文作者：wangcong
    原文地址: https://segmentfault.com/a/1190000007302296
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞