如何在React Native中的抽屉式导航中将收到的数据显示为用户名？

Question

after logging in I received the username and user picture so, how can I display that as shown in the figure below, using react native Drawer Navigation, please Help me ?

Answer 1

您可以按以下方式制作自定义抽屉组件。 首先，像这样初始化DrawerNavigator

const AppScreens = DrawerNavigator(
{
    Screen1: Screen1,
    Screen2: Screen2,
},{
    contentComponent: CustomDrawerComponent,
    'drawerOpenRoute': 'DrawerOpen',
    'drawerCloseRoute': 'DrawerClose',
    'drawerToggleRoute': 'DrawerToggle',
    navigationOptions: {
        gesturesEnabled: false,
    },
});

然后，在此处制作您的自定义抽屉

const CustomDrawerComponent = (props) => {
    return (
        <View>
            <Image source={{uri: 'path/to/image'}} style={{width: 100, height: 50}}/>
            <Text>Your name</Text>
        </View>
    );
}

如果要从缓存中获取名称，则可以在此处使用AsyncStorage，并可以使用props.navigation找到导航道具。