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

Posted 2020-08-25

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           <ChildOne navigatorPush = {this.props.navigator} passValue = ‘我是一个父组件传给子组件的值‘/>
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             <View style={styles.container}>
20                 <Text style={styles.welcome}  onPress={()=>this.pushOneDetails()}>
21                     我是子组件ONE
22                 </Text>
23                 <Text>
24                     {this.props.passValue}
25                 </Text>
26             </View>
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                 <Text style={styles.welcome} onPress={()=>this.passMenthod()}>
23                     我是子组件TWO
24                 </Text>
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             <View style={styles.container}>
29             <ChildTwo pushDetails = {()=>this.pushDetails()} />
30                 <Text>
31                     {ChildTwo.defaultProps.two}
32                 </Text>
33             </View>
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