Отображение динамической информации в окне навигации - React Native

Question

Я хочу отобразить имя пользователя, вошедшего в систему, в заголовке окна навигации. Я получу имя пользователя из хранилища Async или из API. Вот так выглядит мой код для DrawerNavigator. Я создаю это в моем AppNavigator.

const MyDrawerNavigator = createDrawerNavigator({
  MainTab: {
          screen: MainTabNavigator,
          navigationOptions: {
            title:'Home',
            drawerIcon: ()=><SimpleLineIcons name={'home'} size={24} color={Colors.mediumGray}/>,
          }},
  Profile: {
          screen: ProfileNavigator,
          navigationOptions: {
            title:'My Profile',
            drawerIcon: ()=><SimpleLineIcons name={'user'} size={24} color={Colors.mediumGray}/>,
          }
        },
  SignOut: {
          screen: SignOut,
          navigationOptions: {
            title:'Sign Out',
            drawerIcon: ()=><SimpleLineIcons name={'logout'} size={24} color={Colors.mediumGray}/>,
          }},
},
{
  // define customComponent here
  contentComponent: props => 
  <ScrollView>
      <SafeAreaView style={{flex:1}} forceInset={{ top: 'always', horizontal: 'never' }}>
        <View style={{width:'100%', backgroundColor: Colors.primary, height:40}}> 
          <DrawerHeader />
          <Text>Your Own Header Area </Text> 
        </View>
        <DrawerItems {...props} />
        <Text>Your Own Footer Area After</Text>
      </SafeAreaView>
  </ScrollView>,
  contentOptions: {
    headerStyle: {
      backgroundColor: 'white',
    },
    itemsContainerStyle: {
      marginVertical: 140,
    },
    iconContainerStyle: {
      opacity: 1
    },
    itemStyle: {
      fontFamily: Typography.fontFamilyRegular,
      fontWeight: 'normal'
    },
    labelStyle: {
      fontFamily: Typography.fontFamilyRegular,
      fontWeight: 'normal'
    }
  },
}
);

DrawerHeader - это отдельный класс, в котором я пытаюсь получить имя пользователя. Вот так выглядит этот класс

import React, {Component} from 'react';
import { Platform, TouchableOpacity, Image, View, Text } from 'react-native';
import FontAwesome from 'react-native-vector-icons/FontAwesome';


export default class DrawerHeader extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            userId: null,
            errorText: '',
            activityData: '',
            activityDataLoaded: false,
        };
        this._loadDataFromAsyncStorage();
    }

    _loadDataFromAsyncStorage = async () => {
        const userToken = await AsyncStorage.getItem('@user_id');
        alert('_bootstrapAsync in drawerheader'+userToken);
        this.setState({
          userId : userToken,
        })
    };

  render() {

    {!this.state.userId && this._loadDataFromAsyncStorage()}

    if (this.state.userId){
    return (
      <View style={{ flexDirection: 'row' }}>
        <Text>{this.state.userId}</Text>
        <Text>Vikalp Jain</Text>
      </View>
    );
    } else {
        return (
            <View style={{ flexDirection: 'row' }}>
                <Text>No User Id</Text>
            </View>
        )
    }
  }
}

Но это просто отображение «Нет идентификатора пользователя» в заголовке. Я подтвердил, что user_id существует в асинхронном хранилище. Что не так с этим подходом?

Answer 1

Проблема была в том, что я не импортировал библиотеку AsyncStorage.По какой-то причине он не выдал никакой ошибки из-за этого.