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代码 没有进行验证，从网上找的
定义Module类，继承ReactContextBaseJavaModule
在Module类中，重写getName方法声明Module类名称，创建我们自己的方法用来做页面跳转。定义Package类，实现接口ReactPackage
Package类需要实现createNativeModules和createViewManagers两个方法。在createNativeModules中初始化Module类并添加到集合定义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跳转原生及数据传递
