iOS 部分页面使用React Native

如果项目中单纯只是用RN来开发的话，可能就用不上我这篇文章，但是实际开发中，RN和OC原生混合开发的还是占主要位置，下面就来讲讲如何部分页面用RN来写，这次讲得示例是整个项目创建的方式是RN的命令创建的，如果是在原有项目中集成RN到里面去，那么前面还有一些相关的步骤，后面有时间我再整理出一篇相关的文章进行讲解，这么就默认当前通过RN命令的方式创建好了一个项目,下面就来看看相关的代码;

AppDelegate.h
@interface AppDelegate : UIResponder <UIApplicationDelegate>
@property (nonatomic, strong) UIWindow *window;
/**<#属性#>*/
@property (nonatomic,strong)NSURL *jsCodeLocation;
@end

AppDelegate.m
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{
  .
  .
  .
 #ifdef DEBUG
  self.jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
 #else
  self.jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
 #endif
  return YES;
}

1、加载A页面，创建一个控制器A

ReactNativeAController.h文件

#import <UIKit/UIKit.h>
#import <React/RCTRootView.h>
@interface ReactNativeAController : UIViewController
/**rootView*/
@property (nonatomic,strong)RCTRootView *rootView;
@end

ReactNativeAController.m文件
#import "ReactNativeAController.h"
@interface ReactNativeAController ()

@end
@implementation TTReactNativeBasseController
- (void)viewDidLoad{
  [super viewDidLoad];
  NSDictionary *parame =@{};
   self.rootView= [[RCTRootView alloc] initWithBundleURL:SharedAppDelegate.jsCodeLocation moduleName:@"YunTianZhiHui" initialProperties:parame  launchOptions:nil];
  self.rootView.frame=CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
  [self.view addSubview:self.rootView];
}
@end

2、加载B页面

加载B页面跟A页面的加载方式是一样的，唯一需要改的就是
moduleName:@"YunTianZhiHui" 改成index.ios 文件中对应的
moduleName: @" Recommand"

1>>>>index.ios 文件中定义
import React, { Component } from 'react';
import {
    AppRegistry
} from 'react-native';
import YunTianZhiHui from './tiantian/index'
import Recommand from './tiantian/index/index_classfication'


AppRegistry.registerComponent('YunTianZhiHui', () => YunTianZhiHui);
AppRegistry.registerComponent('Recommand', () => Recommand);

'./tiantian/index'  文件定义
import React, { Component } from 'react';
import {
    Navigator,
    AsyncStorage
} from 'react-native';
import EbookReading from '../container/read/two/ebook_reading';
//ebook_reading.js文件就是当前加载的页面

export default class YunTianZhiHui extends Component {
render() {
        let defaultName = 'EbookReading';
//ebook_reading.js文件中 export default class EbookReading extends Component ，注意类名要写成EbookReading 更这里的名称要统一
        let defaultComponent = EbookReading;
        return (
            <Navigator
                initialRoute={{ name: defaultName, component: defaultComponent,params:{orgGid:this.props.orgGid,passportGid:this.props.passportGid,ebookNum:this.props.ebookNum}}}
                configureScene={(route) => {
                return Navigator.SceneConfigs.FloatFromRight;
              }}
                renderScene={(route, navigator) => {
                let Component = route.component;
                return <Component {...route.params} navigator={navigator} />
              }} />
        );
    }

    handleResult(error,result){
        if (error != null) {
            console.log('error message:' + error.message);
            return;
        }
        if (result == null) {
            //没有指定的key
            return;
        }
        return result;
    }
}

index_classfication文件的定义跟'./tiantian/index'  文件定义是一样的，
区别就是:
import TwoRecommand from '../container/recommend/two/two_recommand';
export default class Recommand extends Component {

render() {
        let defaultName = 'TwoRecommand';
        let defaultComponent = TwoRecommand;

}
}

以上是自己在项目开发过程中摸索出来的，采取的是路由开发模式，通过一个管理中心，分散各个路由接口，相信需要加载单个RN页面的能用得上，如果有不同见解，或者有需要纠正的地方，欢迎留言，相互学习！

iOS 部分页面使用React Native

推荐阅读更多精彩内容