一:在原生的页面引入RN
- (void)viewDidLoad{
[super viewDidLoad];
//We need a reference to the AppDelegate since that is where we stored our `RCTBridge`.
AppDelegate *delegate = (AppDelegate *)[[UIApplication sharedApplication] delegate];
//Here we create a `RCTRootView` that initializes with the `RCTBridge` that we already pre-loaded.
RCTRootView *rootView = [[RCTRootViewalloc]initWithBridge:delegate.bridgemoduleName:@"PassingData"];
//We want this view to take up the entire screen.
rootView.frame= [UIScreenmainScreen].bounds;//Here is where we pass down our data that will be a `prop` in the `PassingData` component. data数据源
rootView.initialProperties= [self data];
//Each `ViewController` comes with it's own "base" view, here we just want to add our `RCTRootView`
//to that "base" view so that it is visible on the screen.
[self.viewaddSubview:rootView];
}
二、在RN页面中用类的方法接收参数
'use strict';
varReact=require('react-native');
varSimpleList=require('./SimpleList');
classPassingDataextendsReact.Component{
render() {
return(
//Here we simply pass down our `data` prop that we got from our
//ViewController to the next component which is a ListView wrapped
//with some styling.
);
}
}
/**用类方法从原生功能中获取数据*/
PassingData.propTypes={
//This prop is passed down in `initialProperties` from Obj-C.
data:React.PropTypes.array.isRequired,
};
module.exports=PassingData;
关于:React.PropTypes.array.isRequired的介绍
这个用使用PropTypes进行类型检测,React有一些内置的typechecking能力。 要在组件的props上运行typechecking,可以分配特殊的propTypes属性。React.PropTypes返回的是一系列验证函数,用于确保接收的数据类似是否是有效的。
在这个例子中,我们使用React.PropTypes.array.isRequire检测data是否为数组类型,并且是必填的。
当为prop提供无效值时,JavaScript控制台中将显示警告。 出于性能原因,仅在开发模式下检查propTypes。