有没有办法访问Navigator.js文件中AsyncStorage中的数据

Question

我的应用程序导航结构由以下部分组成：-身份验证堆栈(切换导航器(-AppDrawer-配置文件屏幕-HomeStack-主页选项卡-主页屏幕-搜索屏幕

这个导航器是用createAppContainer((函数导出的，该函数在我的App.js文件中作为JSX组件调用。

我在抽屉导航中创建了一个自定义标题，以显示用户配置文件的详细信息。然而，我目前不确定如何获取这些数据以显示在我的抽屉导航器中的自定义profileComponent(配置文件头(中。

下面是我的导航文件的代码：

const profileComponent = props => (
  <View>
    <View style={styles.profileContainer}>
      <View style={styles.pictureContainer}></View>
      <Text>NAME GOES HERE</Text>
    </View>
    <DrawerItems {...props} />
  </View>
);
const AuthStackNavigator = createStackNavigator({
  Welcome: {
    screen: WelcomeScreen
  },
  Login: {
    screen: LoginScreen
  },
  Register: {
    screen: RegisterScreen
  }
});
const AppTabNavigator = createBottomTabNavigator(
  {
    Main: {
      screen: HomeScreen,
      navigationOptions: {
        tabBarIcon: ({tintColor}) => (
          <Icon name="md-chatbubbles" size={27} color={tintColor} />
        )
      }
    },
    SearchScreen: {
      screen: SearchScreen,
      navigationOptions: {
        tabBarIcon: ({tintColor}) => (
          <Icon name="md-search" size={27} color={tintColor} />
        )
      }
    }
  },
  {
    tabBarOptions: {
      activeTintColor: Color.secondary,
      inactiveTintColor: 'gray',
      showLabel: false
    }
  }
);
const AppStackNavigator = createStackNavigator(
  {
    Discover: AppTabNavigator
  },
  {
    defaultNavigationOptions: {
      headerShown: false
    }
  }
);
const AppDrawerNavigator = createDrawerNavigator(
  {
    Home: AppStackNavigator,
    User: {
      screen: UserScreen
    }
  },
  {
    initialRouteName: 'Home',
    contentComponent: profileComponent,
    drawerOpenRoute: 'DrawerOpen',
    drawerCloseRoute: 'DrawerClose',
    drawerToggleRoute: 'DrawerToggle'
  }
);
const MainNavigator = createSwitchNavigator(
  {
    Auth: AuthStackNavigator,
    HomePage: AppDrawerNavigator
  },
  {initialRouteName: 'Auth'}
);
const AppContainer = createAppContainer(MainNavigator);
export default AppContainer;

Answer 1

您可以做的是将profileComponent作为类组件。然后，您可以创建类组件可以拥有的所有生命周期方法，然后您可以在componentWillMount(生命周期方法(或构造函数中轻松地从AsyncStorage获取用户的数据。

class ProfileComponent extends Component{
    constructor(props){
        super(props);
        this.state={
            userName:""
        }
    }
    async componentWillMount() {
        // Fetch user's data here and then call setState().
        let dataFromAsyncStorage = await AsyncStorage.getItem("userName");
        this.setState({userName: dataFromAsyncStorage})
    }
    render(){
        return(
            <View>
                <View style={styles.profileContainer}>
                  <View style={styles.pictureContainer}></View>
                  <Text>{this.state.userName}</Text>
                </View>
                <DrawerItems {...props} />
            </View>
        );
    }
}