Native给React Native传参的过程

一:在原生的页面引入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。

你可能感兴趣的:(Native给React Native传参的过程)