如何使用道具从父组件获取状态

时间:2019-08-08 09:26:07

标签: react-native

我是React Native的新手,我真的不明白如何使用道具,我有两个组成部分:父母和孩子。那么我如何获得父母的身分呢?

我尝试在此处阅读许多答案并阅读了大量文档,但与我在一起,道具非常辛苦。

import React from 'react';
import { View, Text, Button } from 'react-native';
import {
  createAppContainer,
  createStackNavigator,
  StackActions,
  NavigationActions,
} from 'react-navigation';

class Parent extends React.Component {
  constructor() {
    super();
    this.state = {
      name: 'Hello',
    };
  }
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Parent Screen</Text>
        <Button
          title="Go to Details"
          onPress={() => {this.props.navigation('Child')}}/>
      </View>
    );
  }
}

class Child extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Child Screen</Text>
        <Button
          title="Go to Details"
          onPress={() => {console.log(this.props)}}/>     <--- show data of parent 
      </View>
    );
  }
}

const AppNavigator = createStackNavigator(
  {
    Parent: {
      screen: Parent,
    },
    Child: {
      screen: Child,
    },
  },
  {
    initialRouteName: 'Parent',
  }
);

export default createAppContainer(AppNavigator);

我希望当我这样控制台日志数据时

>{parent: Parent}
  >parent: Parent
  >context: {}
  >props: {screenProps: undefined, navigation: {…}}
  >state: {  name: 'Hello'}
...

1 个答案:

答案 0 :(得分:3)

您需要传递来自父级的数据

mysql -h $HOSTNAME

并在子级中获取这些数据

onPress={() => {this.props.navigation('Child',{parentData:'Pass Data From Here'})}}