使用原生UITabBarController切换React Native页面

RN想必大家都用的很多了，今天还是想演示一下OC原生代码和RN之间交互的场景: 使用OC的UITabBarController在不同的RN页面间切换。

构建RN组件

在这里我们使用一个入口js文件注册多个组件的方式。

export default class DoubleTab extends Component {
  render() {
    return (
      
        
          RN Page1.
        
        
          To get started, edit index.ios.js
        
        
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        
      
    );
  }
}


export class DoubleTab2 extends Component {
  render() {
    return (
      
        
          RN Page2.
        
        
          To get started, edit index.ios.js
        
        
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        
      
    );
  }
}

AppRegistry.registerComponent('Tab1', () => DoubleTab);
AppRegistry.registerComponent('Tab2', () => DoubleTab2);

修改appdelegate.m文件

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation;

  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];

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

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  rootViewController.tabBarItem.title = @"补货";
  
  RCTRootView *rootView2 = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"Tab2"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];
  rootView2.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

  UIViewController *rootViewController2 = [UIViewController new];
  rootViewController2.view = rootView2;
  rootViewController2.tabBarItem.title = @"数据";
  
  
  UITabBarController *tb = [[UITabBarController alloc]init];
  tb.viewControllers=@[rootViewController, rootViewController2];
  self.window.rootViewController=tb;
  
  [self.window makeKeyAndVisible];
  return YES;
}

@end

预览

doubletab.gif