基本上我有一个StackNavigator
嵌套在一个DrawerNavigator
.
我想要的是使用contentComponent
ofDrawerNavigator
来显示登录的用户头像和名称,如下图所示
只是提到我没有使用 redux 或类似的东西。
我有一个InitializerScrren
负责检查登录用户并将其发送到正确的位置,登录屏幕或主屏幕,我也在使用 firebase,所以我最终得到了这个:
constructor(props){
super(props);
firebase.auth.listenForAuth((evt)=> {
var initialRouteName = routesIds.SCREEN_TUTORIAL;
var logedUser = null;
if(evt.authenticated) {
console.log('User details', evt.user);
logedUser = evt.user;
initialRouteName = routesIds.MAIN_DRAWER;
}
this.props.navigation.dispatch({type:'Reset', actions: [{type:'Navigate', routeName:initialRouteName, params:{user:logedUser}}], index:0});
});
}
我的DrawerNavigator
配置是这样的:
var drawerConfig = {
drawerWidth: 250,
drawerPosition: 'left',
contentComponent: props => {
console.log('contentComponent');
console.log(props);
return (
<ScrollView>
<View>
<View style={{paddingVertical: 20, paddingHorizontal: 15, backgroundColor:'#000'}}>
<Text style={{color:'#FFF'}}>avatar, Loged in User Name</Text>
</View>
<DrawerView.Items {...props} />
</View>
</ScrollView>
)
},
contentOptions: {
activeTintColor: cssDefaults.colorPrimary,
inactiveTintColor: cssDefaults.textColor,
style: {
marginVertical: 0,
}
}
}
谢谢!