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

Question

我的应用导航结构包括以下内容： - 身份验证堆栈 （开关导航器） - 应用抽屉 - 个人资料屏幕 - 家庭堆栈 - 主页选项卡 - 主屏幕 - 搜索屏幕

这个导航器是用 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(lifecycle method) 或构造函数中的 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>
        );
    }
}