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

Question

我是 React Native 的新手。我在这个列表中使用 createDrawerNavigator 作为抽屉列表，我使用一个组件来呈现 header 和登录用户名。但我想从另一个组件（配置文件屏幕）更改该名称。我找不到解决方案。

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

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

您可以创建一个单独的组件并在您的 DrawerNavigator 中使用该组件。

<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>
}

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

How to change drawer header value from another component?

navigation-drawer

react-native