react native 之子组件和父组件之间的通信
2024-04-09 14:15:28
react native开发中,为了封装性经常需要自定义组件,这样就会出现父组件和子组件,那么怎么在父组件和子组件之间相互通信呢,也就是怎么在各自界面push和pop.传值.
父组件传递给子组件:
父组件:
在主组件里面,使用通过写一个子组件的属性,直接把值或者navigator传给子组件即可.如下20行:
/**
* Sample React Native App
* https://github.com/facebook/react-native
* 父组件传递给子组件
* 父组件把值或者navigator传给子组件,然后在子组件里面实现push和显示
*/ import React, { Component } from 'react';
import ChildOne from './ChildOne'
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native'; export default class HomeOne extends Component {
render() {
return (
20 <ChildOne navigatorPush = {this.props.navigator} passValue = '我是一个父组件传给子组件的值'/>
);
}
} const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
子组件:
子组件这边可以直接使用主组件写的属性push和pop,通过this.props.属性名使用传过来的值.如下24行.31行
/**
* Sample React Native App
* https://github.com/facebook/react-native
* 父组件传递给子组件
*/ import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
navigator,
} from 'react-native';
import OneDetails from './OneDetails'
export default class ChildOne extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome} onPress={()=>this.pushOneDetails()}>
我是子组件ONE
</Text>
<Text>
24 {this.props.passValue}
</Text>
</View>
);
}
pushOneDetails = ()=>{
30
31 this.props.navigatorPush.push({
32 component:OneDetails
33 })
}
} const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
子组件传递给父组件:
子组件:
自组件通过定义一个属性直接把事件传递给主组件,这样就可以在点击子组件实现在主组件里面实现push和pop,如下22行.28行.通过static....把值传给主组件使用,如行17-19
/**
* Sample React Native App
* https://github.com/facebook/react-native
* 子组件传递给父组件
*/ import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native'; export default class ChildTwo extends Component {
1 static defaultProps = {
18 two: '我是子组件传给主组件的值'
19 };
render() {
return (
<Text style={styles.welcome} onPress={()=>this.passMenthod()}>
我是子组件TWO
</Text>
);
}
passMenthod = () =>{
28 this.props.pushDetails()
29 }
} const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
父组件:
父组件这边直接通过子组件的属性来接受事件,从而在主组件这边push和pop.如行29,行37-39.通过子组件.属性名.值使用子组件传过来的值,如行31
/**
* Sample React Native App
* https://github.com/facebook/react-native
* 子组件传递给父组件
* 子组件把事件或值传递给父组件,然后在父组件push和显示
*/ import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import ChildTwo from './ChildTwo'
import TwoDetails from './TwoDetails'
export default class HomeTwo extends Component {
// 构造
constructor(props) {
super(props);
// 初始状态
this.state = {
value:''
};
}
render() {
return (
<View style={styles.container}>
<ChildTwo pushDetails = {()=>this.pushDetails()} />
<Text>
31 {ChildTwo.defaultProps.two}
</Text>
</View>
);
}
pushDetails = ()=>{
37 this.props.navigator.push({
38 component:TwoDetails
39 })
}
} const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
项目代码:https://github.com/pheromone/react-native-childComponent-component
最新文章
- iOS_UIImage的方向(imageOrientation)
- 设置svg图片大小
- const的全面理解
- redis命令参考
- vs2010中将复制过来的文件或文件夹显示到解决方案管理
- 猫学习IOS（五岁以下儿童）UI之360其他下载管理器广场UI
- 卓尼斯ZT-180点评
- tensorflow实现最基本的神经网络 + 对比GD、SGD、batch-GD的训练方法
- ZYNQ基础知识一
- C++一个类对象的大小计算
- LeetCode545.Boundary-of-Binary-Tree
- PDF分享：国外优秀数学教材选评
- Java学习笔记之——Manth类和String类
- Day26--Python--包
- link & auto cards
- AngularJs 常用指令标签
- BouncyCastle 密钥转换 - Java
- lua中的字符串操作(模式匹配)
- linux pdb调试总结
- Highcharts实现走势图