Native - RN 互跳

技术

1、在我们刚学习rn的时候，官方提供给我们一个简单的demo，实现了native跳转RN页面

  NSURL *jsCodeLocation;
  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"SecondProject"
                                               initialProperties:nil
                                                   launchOptions:nil];
   UIViewController *reactNativeVC = [UIViewController new];
  reactNativeVC.view = rootView;
//  reactNativeVC.title = @"cnode";
  [self.navigationController setNavigationBarHidden:YES animated:YES];
  [self.navigationController pushViewController:reactNativeVC animated:YES];

就这么一段代码就ok了。

2、那么RN页面怎么跳回native页面呢，下边咱们代码实现以下

因为以前是搞iOS的，所以对iOS代码比较熟悉一些，就先拿OC代码来实现以下

• 先写OC部分的代码
  要实现rn与native的交互，我们看到项目中依赖的三方库中有<React/RCTBridgeModule.h> bridge很明显‘桥’的意思。要实现rn页面跳转到native页面，咱们就需要用到这个类了。首先创建一个继承自NSObject的类，然后我们遵循RCTBridgeModule 协议。

#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>
@interface OpenNativeModule : NSObject<RCTBridgeModule>
@end
#import "OpenNativeModule.h"
#import "AppDelegate.h"
#import "NativeViewController.h"
@implementation OpenNativeModule
RCT_EXPORT_MODULE();
RCT_EXPORT_METHOD(openNativeVC:(NSString *)tag) {
  switch ([tag integerValue]) {
    case 1:
      dispatch_async(dispatch_get_main_queue(), ^{
        AppDelegate *delegate = (AppDelegate *)([UIApplication sharedApplication].delegate);
        UINavigationController *rootNav = delegate.navC;
        NativeViewController *nativeVC = [[NativeViewController alloc] init];
        [rootNav pushViewController:nativeVC animated:YES];
      });
      break;
    case 2:
      dispatch_async(dispatch_get_main_queue(), ^{
        AppDelegate *delegate = (AppDelegate *)([UIApplication sharedApplication].delegate);
        UINavigationController *rootNav = delegate.navC;
        NativeViewController *nativeVC = [[NativeViewController alloc] init];
        [rootNav pushViewController:nativeVC animated:YES];
      });
      break;
    default:
      break;
  }
}
@end

• react-native 代码

export default class NavigatorIOSExample extends Component {
    _jumpToNative=()=>{
        nativeModule.openNativeVC('1')
    }
    render() {
        return (
            // <NavigatorIOS
            //     initialRoute={{
            //         component: MyScene,
            //         title: 'My Initial Scene',
            //         passProps: { title: 'test' },
            //     }}
            //     style={{ flex: 1 }} />
            <TouchableHighlight onPress={this._jumpToNative}>
                <Text style={{marginTop:64}}>这里是跳转native的</Text>
            </TouchableHighlight>
        )
    }
}

• Android代码 没有进行验证，从网上找的

  1. 定义Module类，继承ReactContextBaseJavaModule
     在Module类中，重写getName方法声明Module类名称，创建我们自己的方法用来做页面跳转。

  2. 定义Package类，实现接口ReactPackage
     Package类需要实现createNativeModules和createViewManagers两个方法。在createNativeModules中初始化Module类并添加到集合

  3. 定义Application类，继承android的Application，并实现ReactApplication接口。
     在getPackages方法中初始化Package类，并添加到集合。

RN项目创建的时候Application类就有了，不需要再创建。如果是集成到现有原生项目，就需要手动修改Application类。

// Module类核心代码：
public class OpenNativeModule extends ReactContextBaseJavaModule {
    private ReactContext mReactContext;
    public OpenNativeModule(ReactApplicationContext context) {
        super(context);
        this.mReactContext = context;
    }
    @Override
    public String getName() {
        return "OpenNativeModule";
    }
    @ReactMethod
    public void openNativeVC() {
        Intent intent = new Intent();
        intent.setClass(mReactContext, SettingsActivity.class);
        intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
        mReactContext.startActivity(intent);
    }
}
// Package类核心代码：
public class TestReactPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(
            ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new OpenNativeModule(reactContext));
        return modules;
    }
    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}
// Application类核心代码：
@Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new VectorIconsPackage(),
          new TestReactPackage()
      );
    }

更多详细还可以参考RN与原生交互（一）——基本页面跳转、简书RN笔记-RN跳转原生及数据传递