一：在原生的页面引入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。
网友评论