react native 之子组件和父组件之间的通信

2024-03-17 04:29| 来源: 网络整理| 查看: 265

react native开发中,为了封装性经常需要自定义组件,这样就会出现父组件和子组件,那么怎么在父组件和子组件之间相互通信呢,也就是怎么在各自界面push和pop.传值.

父组件传递给子组件:

父组件:

在主组件里面,使用通过写一个子组件的属性,直接把值或者navigator传给子组件即可.如下20行:

1 /** 2 * Sample React Native App 3 * https://github.com/facebook/react-native 4 * 父组件传递给子组件 5 * 父组件把值或者navigator传给子组件,然后在子组件里面实现push和显示 6 */ 7 8 import React, { Component } from 'react'; 9 import ChildOne from './ChildOne' 10 import { 11 AppRegistry, 12 StyleSheet, 13 Text, 14 View 15 } from 'react-native'; 16 17 export default class HomeOne extends Component { 18 render() { 19 return ( 20 21 ); 22 } 23 } 24 25 const styles = StyleSheet.create({ 26 container: { 27 flex: 1, 28 justifyContent: 'center', 29 alignItems: 'center', 30 backgroundColor: '#F5FCFF', 31 }, 32 welcome: { 33 fontSize: 20, 34 textAlign: 'center', 35 margin: 10, 36 }, 37 instructions: { 38 textAlign: 'center', 39 color: '#333333', 40 marginBottom: 5, 41 }, 42 });

子组件:

子组件这边可以直接使用主组件写的属性push和pop,通过this.props.属性名使用传过来的值.如下24行.31行

1 /** 2 * Sample React Native App 3 * https://github.com/facebook/react-native 4 * 父组件传递给子组件 5 */ 6 7 import React, { Component } from 'react'; 8 import { 9 AppRegistry, 10 StyleSheet, 11 Text, 12 View, 13 navigator, 14 } from 'react-native'; 15 import OneDetails from './OneDetails' 16 export default class ChildOne extends Component { 17 render() { 18 return ( 19 20 this.pushOneDetails()}> 21 我是子组件ONE 22 23 24 {this.props.passValue} 25 26 27 ); 28 } 29 pushOneDetails = ()=>{ 30 31 this.props.navigatorPush.push({ 32 component:OneDetails 33 }) 34 } 35 } 36 37 const styles = StyleSheet.create({ 38 container: { 39 flex: 1, 40 justifyContent: 'center', 41 alignItems: 'center', 42 backgroundColor: '#F5FCFF', 43 }, 44 welcome: { 45 fontSize: 20, 46 textAlign: 'center', 47 margin: 10, 48 }, 49 instructions: { 50 textAlign: 'center', 51 color: '#333333', 52 marginBottom: 5, 53 }, 54 });

子组件传递给父组件:

子组件:

自组件通过定义一个属性直接把事件传递给主组件,这样就可以在点击子组件实现在主组件里面实现push和pop,如下22行.28行.通过static....把值传给主组件使用,如行17-19

1 /** 2 * Sample React Native App 3 * https://github.com/facebook/react-native 4 * 子组件传递给父组件 5 */ 6 7 import React, { Component } from 'react'; 8 import { 9 AppRegistry, 10 StyleSheet, 11 Text, 12 View 13 } from 'react-native'; 14 15 16 export default class ChildTwo extends Component { 17 static defaultProps = { 18 two: '我是子组件传给主组件的值' 19 }; 20 render() { 21 return ( 22 this.passMenthod()}> 23 我是子组件TWO 24 25 ); 26 } 27 passMenthod = () =>{ 28 this.props.pushDetails() 29 } 30 } 31 32 const styles = StyleSheet.create({ 33 container: { 34 flex: 1, 35 justifyContent: 'center', 36 alignItems: 'center', 37 backgroundColor: '#F5FCFF', 38 }, 39 welcome: { 40 fontSize: 20, 41 textAlign: 'center', 42 margin: 10, 43 }, 44 instructions: { 45 textAlign: 'center', 46 color: '#333333', 47 marginBottom: 5, 48 }, 49 });

父组件:

父组件这边直接通过子组件的属性来接受事件,从而在主组件这边push和pop.如行29,行37-39.通过子组件.属性名.值使用子组件传过来的值,如行31

1 /** 2 * Sample React Native App 3 * https://github.com/facebook/react-native 4 * 子组件传递给父组件 5 * 子组件把事件或值传递给父组件,然后在父组件push和显示 6 */ 7 8 import React, { Component } from 'react'; 9 import { 10 AppRegistry, 11 StyleSheet, 12 Text, 13 View 14 } from 'react-native'; 15 import ChildTwo from './ChildTwo' 16 import TwoDetails from './TwoDetails' 17 export default class HomeTwo extends Component { 18 // 构造 19 constructor(props) { 20 super(props); 21 // 初始状态 22 this.state = { 23 value:'' 24 }; 25 } 26 render() { 27 return ( 28 29 this.pushDetails()} /> 30 31 {ChildTwo.defaultProps.two} 32 33 34 ); 35 } 36 pushDetails = ()=>{ 37 this.props.navigator.push({ 38 component:TwoDetails 39 }) 40 } 41 } 42 43 const styles = StyleSheet.create({ 44 container: { 45 flex: 1, 46 justifyContent: 'center', 47 alignItems: 'center', 48 backgroundColor: '#F5FCFF', 49 }, 50 welcome: { 51 fontSize: 20, 52 textAlign: 'center', 53 margin: 10, 54 }, 55 instructions: { 56 textAlign: 'center', 57 color: '#333333', 58 marginBottom: 5, 59 }, 60 });

项目代码:https://github.com/pheromone/react-native-childComponent-component

【本文地址】

公司简介

联系我们