我是本机上的新手。我将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>
);
}
每当用户更新名称时,我都希望从配置文件组件更改名称状态,该状态将反映在抽屉屏幕上。
答案 0 :(得分:0)
您可以创建一个单独的组件,并在您的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>
}