今天主要记录一下react native的几种传值方式;
1.navigator传值
在此就不记录react-navigation的具体使用方法了,可以参见官网中的使用实例.下面代码记录从home页面跳转到second页面并传递参数的过程;
home页面代码
render() {
return (
<View style={styles.container}>
<TouchableOpacity style={styles.buttonStyle} onPress={() => {this.props.navigation.navigate('second',{datasource: "我是第一个页面传来的数据"})}}>
<Text style={{fontSize:16,color:'white'}}>跳转到下一页面</Text>
</TouchableOpacity>
</View>
);
}
上面代码中onPress={() => {this.props.navigation.navigate('second',{datasource: "我是第一个页面传来的数据"})}}就是声明的一个跳转的点击方法,navigator后面跟的第一个参数second,代表跳转的页面;{datasource: "我是第一个页面传来的数据"}代表要传递过去的参数,名称可以是任意,只要保证在另外一个页面取值时相同即可.当然也可以传递一个json字符串,在另外一个页面通过点语法获取想要的值即可.
接下来看一下在另外一个页面的使用情况
render() {
//1.不同页面之间使用navigator进行正向传值
//此处为析构的过程,当然也可以在在下面直接使用this.props.navigation.state.datasource来获取,只不过使用这种方式会更加清晰明了
const { params } = this.props.navigation.state;
return (
<View style={styles.container}>
<Text>{params.datasource}</Text>
</View>
);
}
2.props传值(一般使用在父子关系的组件中)
首先来写一个子组件(注意次处的子组件和父组件是是在一个js文件中,若在两个js文件中记得使用export default关键字修饰)
class OneView extends Component {
render(){
return(
<View>
<Text>{this.props.textnum}</Text>
</View>
);
}
}
父组件中使用时只要传一个textnum,子组件就可以通过他的props来获取
<OneView textnum="str"/>
3.ref传值(一般使用在兄弟组件或者在父组件中对子组件局部刷新)
把上面写的OneView的组件做如下修改
class OneView extends Component {
constructor(props) {
super(props);
this.state = {
//声明一个refNum变量并设初始值为0
refNum : 0,
}
//this._oneFunction = this._oneFunction.bind(this);
}
//在此写一个方法,在外面通过ref的方式来调用,更新当前的refNum字段
_oneFunction = (number) => {
this.setState({refNum:number})
}
render(){
return(
<View>
{/*在此验证上面的方法是否执行*/}
<Text>{this.state.refNum}</Text>
<Text>{this.props.textnum}</Text>
</View>
);
}
}
在外面使用时
export default class second extends Component {
render() {
return (
<View style={styles.container}>
{/*点击方法中通过refs.'设置的ref值'并通过点语法调用组件中的方法*/}
<TouchableOpacity style={styles.buttonStyle} onPress={() => {this.refs.OneView._oneFunction(7)}}>
<Text style={{fontSize:16,color:'white'}}>我是home的二级页面</Text>
</TouchableOpacity>
{/*设置组件的ref值,其实就是相当于设置一个索引,在其他的地方可以通过此值来当道当前的组件*/}
<OneView ref="OneView" textnum="str"/>
</View>
);
}
}
