如何从另一个组件更改抽屉头值？

Question

我是新的反应本地人。我在此列表中使用createDrawerNavigator作为抽屉列表我使用一个组件来呈现具有登录用户名的标题。但我想从另一个组件（配置文件屏幕）更改该名称。我无法找到解决方案。

这是我的抽屉导航器代码：

const AppDrawerNavigator = createDrawerNavigator({
  Home: {
    screen: Home,
    navigationOptions: {
      drawerLabel: 'Home',
      drawerIcon: () => (
        <Icon name="home" size={20} color="#0f1f7b" />
        )
    },
  },
  Profile: {
    screen: Profile,
    navigationOptions: {
      drawerLabel: 'Profile',
      drawerIcon: () => (
        <Icon name="user" size={20} color="#0f1f7b" />
      ),
    },
  },
  Logout: {
    screen: Logout,
    navigationOptions: {
        drawerLabel: 'Logout',
        drawerIcon: () => (
          <Icon name="sign-out" size={20} color="#0f1f7b" />
          )
    },
  }
},
{
  drawerBackgroundColor: "#fff",
  contentOptions: {
    activeTintColor: '#000',
    inactiveTintColor: '#000',
    activeBackgroundColor: '#bfc7f3',
    itemStyle: {
      fontSize: 12,
    },
  },
  contentComponent: (props) => (
            <View>
              <ScrollView>
              <DrawerUserDetail />

                <DrawerItems
                  {...props}
                  getLabel = {(scene) => (
                    <View style={{width:width/1.9}}>
                      <Text style={{color:'#000',fontSize:18,fontWeight:'500',paddingBottom:10,paddingTop:10}}>{props.getLabel(scene)}</Text>
                    </View>
                  )}
                />
                </ScrollView>
              </View>
            )
});

这是抽屉用户详细信息代码：

constructor(props){
    super()
    this.state={
      name:'',
    }
  }

  render() {
    return (
        <View style={styles.profileBg}>
          <Text style={{fontSize:20,color:'#fff',fontWeight:'600',left:20}}>Hello! {this.state.name}</Text>
        </View>
    );
  } 

每当用户更新名称将反映在抽屉屏幕上时，我希望从配置文件组件更改名称状态。

Answer 1

您可以创建一个单独的组件，并在DraqweNavigator中使用此组件。

<DrawerUserDetail  navigation={props.navigation} />

这是组件：

export default class DrawerUserDetail extends Component<Props> {

componentDidMount() {
  //You can call your API here.
}

<View style={styles.profileBg}>
        <View style={styles.profileHeader}>
          <Text style={styles.name}>{this.state.name}{' '}</Text>
          <Text onPress={()=> this.props.navigation.navigate('ProfileUpdate')}
           style={styles.changePassword}>Manage Account</Text>
        </View>
      </View>
}