react-native 传值

     今天我来整理一下react-native页面传值的问题

     我们分为三个方面，父组件向子组件传值，子组件向父组件传值，不同界面传值

一、父子组件传值

父组件

var firstPage = React.createClass({
getInitialState:function(){
return (
firstState: false,
);
},
render:function(){
return(
<secondPage secondState={this.props.firstState}/>
);
},
});

子组件

var secondPage = React.createClass({
render:function(){
return(
<Text>{this.props.secondState?1:0}<Text>
);
},
});

二、子组件向父组件传值
    这里的传值，实质就是父组件向子组件传值时使用回调函数，使得子组件可以改变父组件的值。

父组件

var firstPage = React.createClass({
getInitialState:function(){
return (
firstState: false,
);
},
firstFunction:function(value){
this.setState({
firstState: value,
});
},
render:function(){
return(
<secondPage secondState={this.props.firstState} callBack={this.firstFunction(value)}/>
);
},
});

子组件
var secondPage = React.createClass({
getInitialState: function () {
return {
secondState: this.props.secondState,
};
},
render{
return(
<TouchableHighlight onpress={()=>{
var newState = !this.state.secondState;
this.setState({
secondState: newState,
});
// 这里要注意:setState是一个异步方法,所以需要操作缓存的当前值，
//需要即刻调用时可使用回调setSate({xx: xxx},()=>{});
this.props.callBack(newState);
}}>
<Text>{this.state.secondState?1:0}</Text>
</TouchableHighlight>
);
},
});

这里点击了子组件的按钮，父组件也会发生

三、不同界面之间传值
    在两个界面之间传值要使用监听，监听有多种方法，这里不详细介绍

在componentDidMount(){}放置监听

在componentWillUnmount(){}消除监听