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

標籤：github   app   const   super   blog   assm   targe   try   end   

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     View15 } 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                     我是子組件ONE22                 </Text>23                 <Text>24                     {this.props.passValue}25                 </Text>26             </View>27         );28     }29     pushOneDetails = ()=>{30 31         this.props.navigatorPush.push({32         component:OneDetails33     })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     View13 } 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                     我是子組件TWO24                 </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     View14 } 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:TwoDetails39         })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

 

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