如果项目中单纯只是用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页面的能用得上，如果有不同见解，或者有需要纠正的地方，欢迎留言，相互学习！
