如何在反应本机的抽屉导航中将接收到的数据显示为用户名？

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 找到。