React-Native开发经常遇到需要使用跳转原生界面或者要嵌入原生界面在RN界面中等等交互。此处记录一下自己的一些处理方式

1.RN跳转原生界面

2.RN嵌入原生界面

3.原生跳转RN界面

---

RN跳转原生界面

第一步 导出方法供RN调用

新建交互类，如有该类可忽略

.h

#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>
#import <React/RCTLog.h>
// RN调用原生的
@interface xkMerchantModule : NSObject<RCTBridgeModule>
@end

.m

#import "xkMerchantModule.h"
#import "NSObject+XKController.h"
#import "NativeController.h"
#define KEY_WINDOW   [UIApplication sharedApplication].keyWindow

@interface xkMerchantModule()
@end

@implementation xkMerchantModule
RCT_EXPORT_MODULE();


RCT_EXPORT_METHOD(pushNative)
{
  dispatch_async(dispatch_get_main_queue(), ^{
    NativeController *vc =[NativeController new];
    [self.getCurrentUIVC.navigationController pushViewController:vc animated:YES];
  });
}
@end

#######注：rn调用是不在主线程，需要回到主线程进行UI操作，否则可能崩溃。

第二步 RN中调用方法

相应界面导入原生交互模块

import {Text, View, Button, NativeModules} from 'react-native';

使用原生提供的方法进行跳转

class SettingsScreen extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <Button
                    title="跳转原生界面"
                    onPress={() => {
                        NativeModules.xkMerchantModule.pushNative();
                    }}
                />
            </View>
        );
    }
}

对于RN跳转的原生界面，原生界面返回时使用原生的pop就可以完成原生回到RN界面的功能

RN嵌入原生界面

在开发一些需求时，可能有些界面必须使用原生界面。在某些场景，并不是RN跳转到原生，而是原生界面嵌入到RN界面中，比如原生界面作为RN tabBar中的一个界面。
(具体细节 参考：https://github.com/crazycodeboy/RNStudyNotes)

第一步 将需要嵌入的界面/控制器 制作成RN的组件

rn无法将原生控制器直接嵌入，所以需要把嵌入的界面以UIView的形式创建。
创建桥接代码

.h

#import <React/RCTViewManager.h>
@interface MyTableView : RCTViewManager
@end

.m

#import "MyTableView.h"
#import "FirstViewController.h"

@implementation MyTableView

RCT_EXPORT_MODULE()

- (UIView *)view {
  FirstViewController *vc = [[FirstViewController alloc] init];
  vc.backgroundColor = [UIColor redColor];
  return vc;
}
@end

FirstViewController 其实是UIView

第二步 RN代码中使用原生组件

新建组件类 MyTableView.js 导出原生的组件

import { requireNativeComponent } from 'react-native';
module.exports = requireNativeComponent('MyTableView', null);

使用

import MyTablView from './MyTableView'

class TablView extends React.Component {
    render() {
        return (
            <MyTablView style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            </MyTablView>
        );
    }
}

const TabNavigator = createBottomTabNavigator({
    RN: { screen: RootStack },
    Native: { screen: TablView },
});

原生跳转RN界面

第一步 导出原生使用的界面

import {AppRegistry} from 'react-native';
import App from './nativeInsert';
import TestPage from './TestPage'
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

AppRegistry.registerComponent('TestPageName', () => TestPage);

导出TestPageName。有多少界面需要导出原生使用就写多少

第二步 原生加载RN界面

RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                       moduleName:@"TestPageName"
                                                initialProperties:nil
                                                   launchOptions:nil];
BaseRNViewController *rootViewController = [BaseRNViewController new];    rootViewController.view = rootView;
[self.navigationController pushViewController:rootViewController animated:YES];
 });

第三步 处理RN pop回原生

通RN跳转原生的思路一致，提供原生方法供RN调用

@interface xkMerchantModule()
@end

@implementation xkMerchantModule
RCT_EXPORT_MODULE();
RCT_EXPORT_METHOD(popNative)
{
  dispatch_async(dispatch_get_main_queue(), ^{
    [self.getCurrentUIVC.navigationController popViewControllerAnimated:YES];
  });
}

@end

RN代码中：

 <Button  title={"我是RN界面 p o p 回到原生界面" + this.props.itemId}
                    onPress={() => {
                        NativeModules.xkMerchantModule.popNative();
                    }}
                />

注：上述原生跳转RN界面是最开始的方案，确实是可以实现的，但是在调试时，每次由原生跳转到RN时，都会重新加载JS资源，会出现白屏的现象。并且新的RN界面，和最初的RN界面的环境不一致，RN内部无法获取之前的全局配置以及缓存信息。

所以需要有两个优化点：
1.提前加载资源
2.保证RN环境的一致。

如果对于RN项目，Appdelegate里已经调用了下面方法了加载过了资源一次。

- (instancetype)initWithBundleURL:(NSURL *)bundleURL
                       moduleName:(NSString *)moduleName
                initialProperties:(NSDictionary *)initialProperties
                    launchOptions:(NSDictionary *)launchOptions
{
  RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:bundleURL
                                            moduleProvider:nil
                                             launchOptions:launchOptions];

  return [self initWithBridge:bridge moduleName:moduleName initialProperties:initialProperties];
}

查看源码内部，其实创建了一个桥接类RCTBridge *bridge。
这里我们可以将该bridge保存下来，

 RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"xkMerchant"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];
  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
  [ReactRootViewManager manager].bridge = rootView.bridge;

下次使用bridge加载新的rootView，也就是RN提供给我们的下列方法创建。即可解决重新加载时间长和环境不一致的问题。

- (instancetype)initWithBridge:(RCTBridge *)bridge
                    moduleName:(NSString *)moduleName
             initialProperties:(NSDictionary *)initialProperties NS_DESIGNATED_INITIALIZER;

 RCTRootView * rnView = [[RCTRootView alloc] initWithBridge:[ReactRootViewManager manager].bridge
                                                  moduleName:viewName
                                           initialProperties:initialProperty];

如果对于原生项目想集成RN，进行部分页面跳转。实现逻辑同理，在使用之前，
先调用RCTBridge初始化方法，提前加载资源，再缓存bridge即可。

[[RCTBridge alloc] initWithBundleURL:bundleURL
                                            moduleProvider:nil
                                             launchOptions:launchOptions];

demo:https://github.com/sy5075391/iOS-native-RN.git