React communication between child components of native and parent components

React native development, in order to encapsulate often need to customize the component, so that the parent and child components will appear, then how to communicate with each other between the parent and child components, that is, how to push and pop in their respective interface.

Parent component passed to child component:

Parent component:

In the main component, the value or navigator can be passed directly to the subassembly by writing the properties of a subcomponent. The following 20 lines:

1 /**
 2 * Sample React Native App
 3 * https://github.com/facebook/react-native
 4 * parent component passed to child component
 5 * The parent component passes the value or navigator to the child component, and then implements push and display in the child component
 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 = ‘I ’m a parent component passing values to child components’
twenty one         );
twenty two     }
twenty three }
twenty four 
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}); 

Sub-components:

Subcomponents this way you can directly use the property push and pop written by the main component, using the This.props. Property name to use the passed-in value. The following 24 lines. 31 Rows

1 /**
 2 * Sample React Native App
 3 * https://github.com/facebook/react-native
 4 * parent component passed to child component
 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 I am a subcomponent 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}); 

Parent component passed to child component:

Sub-components:

Since the component passes the event directly to the main component by defining a property, it can implement push and pop in the main component by clicking on the sub-component implementation, as follows 22 lines. 28 lines. by static .... Pass the value to the main component for use, such as row 17-19

1 /**
 2 * Sample React Native App
 3 * https://github.com/facebook/react-native
 4 * Child component passed to parent component
 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: `` I am the value passed from the child component to the main component ''
19};
20 render () {
21 return (
22 <Text style = {styles.welcome} onPress = (() => this.passMenthod ())>
23 I am a subcomponent 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}); 

Parent component:

Parent component This side directly accepts events through the properties of the subassembly, pushing and pop on the main component side. For example, line 29, line 37-39. Through subcomponents. The value used by the subassembly, such as row 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 });

Project code: Https://github.com/pheromone/react-native-childComponent-component

React communication between child components of native and parent components