react native 之子組件和父組件之間的通訊

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