React Native 系列(五) -- 组件间传值
React Native 系列(五) -- 组件间传值
Scott_Mr
发布于 2018-05-16 16:23:16
发布于 2018-05-16 16:23:16
前言
本系列是基于React Native版本号0.44.3写的。任何一款 App 都有界面之间数据传递的这个步骤的，那么在RN中，组件间是怎么传值的呢？这篇文章将介绍到顺传、逆传已经通过通知传值。
顺传
其实我们在本系列第二篇文章中，讲述Props和State的时候就已经接触了顺传。
- 通过
props传值 举个?：父控件给子控件传递一个name属性的值，子控件展示父控件传递过来的值：
上述代码的数据传递其实是这样的: 主组件 -> FatherComponent -> SonComponent。 但是有时候，我们并不是在创建 子组件 的时候就传递值，而是需要等待某个触发事件的时候，再传递，这就涉及到获取子组件传值。
- 通过
ref拿到组件，然后传值 举个?：通过点击屏幕上的 + 号按钮，实现没点击一次，让SonComponent的输出数字加1。
逆传
- 使用方法回调：
- 在父组件定义一个处理接收值的方法
- 把这个方法传递给子组件，并且绑定
this，子组件就能通过this.props拿到这个方法调用
举个例子，同样是点击屏幕上的 + ，让屏幕上的数字 加 1。（ps：和上面通过ref拿到子组件，传递的代码有区别，注意组件层级)
// 子组件
class SonComponent extends Component {
addClick(){
this.props.receiveNumber()
}
render(){
return (
<View style={styles.sonViewStyle}>
<Text style={{fontSize: 40}} onPress={this.addClick.bind(this)}>{"+"}</Text>
</View>
);
}
}
// 父组件
class FatherComponent extends Component {
// 构造
constructor(props) {
super(props);
// 初始状态
this.state = {
number: 1
};
}
receiveNumber(){
var m = this.state.number;
m += 1;
this.setState({
number: m
});
}
render(){
return (
<View style={styles.container}>
<SonComponent receiveNumber={this.receiveNumber.bind(this)}/>
<View style={styles.fatherViewStyle}>
<Text style={{fontSize: 20}}>{this.state.number}</Text>
</View>
</View>
);
}
}
// 主组件
export default class RNDemoOne extends Component {
render() {
return (
<View style={styles.container}>
<FatherComponent/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
sonViewStyle: {
flex: 1,
backgroundColor: '#F5FCFF',
justifyContent: 'center',
alignItems: 'center',
},
fatherViewStyle: {
flex: 1,
justifyContent: 'center',
alignItems:'center',
},
});通知
- 当两个组件之间互相拿不到谁的时候，可以用通知传值。比如当两个组件是同一层级关系的时候（兄弟关系）。
举个?： 点击发送生活费，哥哥就给弟弟发送100生活费。
// 弟弟组件
class DiDiComponent extends Component {
// 构造
constructor(props) {
super(props);
// 初始状态
this.state = {
money: 0
};
}
componentDidMount() {
// 添加监听者
this.listener = DeviceEventEmitter.addListener('makeMoney', (money) => {
this.setState({
money: money
});
})
}
componentWillUnmount() {
// 销毁监听者
this.listener.remove();
}
render(){
return (
<View style={styles.didiStyle}>
<Text>弟弟</Text>
<Text>收到{this.state.money}零花钱</Text>
</View>
);
}
}
// 哥哥组件
class GeGeComponent extends Component {
render(){
return (
<View style={styles.gegeStyle}>
<Text>哥哥</Text>
<Text onPress={()=>{
DeviceEventEmitter.emit('makeMoney', 100)
}}>发生活费</Text>
</View>
);
}
}
// 主组件
export default class RNDemoOne extends Component {
render() {
return (
<View style={styles.container}>
<DiDiComponent/>
<GeGeComponent/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
didiStyle: {
flex: 1,
backgroundColor: '#F5FCFF',
justifyContent: 'center',
alignItems: 'center',
},
gegeStyle: {
flex: 1,
justifyContent: 'center',
alignItems:'center',
},
});点击发送生活费，就可以看到弟弟能接收到生活费。
好了，组件间传值就讲到这里了。
致谢
如果发现有错误的地方，欢迎各位指出，谢谢！
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-08-10 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录