Как изменить значение заголовка ящика с другого компонента?

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