React-native 使用原生(ios, android)第三方sdk
React-native 使用native第三方sdkios(以阿里百川用户反馈为例)
target ‘Xss’ do pod 'YWFeedbackFMWK','~> 1.1.1' end
由于这种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)
android
allprojects { repositories { ... flatDir { dirs 'libs' } ... } } 在app目录下的build.gradle文件对应位置添加如下语句 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') }
MultiDex.install(this); // 同样是开启multidex模式编译,网上大部分解决方案都没提这个设置,泪崩~~~~ FeedbackAPI.initAnnoy(this.getApplication(),"yourappkey"); // 初始化阿里百川意见反馈
具体代码如下 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()); } }
@Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( ... new BCBridgePackage() ); }
总结(个人心得)由于上面提到的封装原生的页面(ios中体现为viewController,android中体现为activity),所以不提倡直接去使用别人集成好的viewController和activity,比较提倡使用这类方式来集成原生中的方法或者是组件,然后用rn来实现整体的ui布局,这样在开发成本上以及性能上都能得到很大的提高。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |