2

基本上我有一个StackNavigator嵌套在一个DrawerNavigator.

我想要的是使用contentComponentofDrawerNavigator来显示登录的用户头像和名称,如下图所示

只是提到我没有使用 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,
        }
    }
}

谢谢!

4

0 回答 0