时间戳

首页 > 解决方案 > 有没有办法在我的 Navigator.js 文件中访问 AsyncStorage 中的数据？

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

问题描述

我的应用导航的结构包括以下内容： - 身份验证堆栈 (SwitchNavigator) - AppDrawer - 配置文件屏幕 - HomeStack - HomeTab - HomeScreen - SearchScreen

此导航器使用 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;

标签： javascriptandroidreact-native

解决方案

您可以做的是，您可以制作 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>
        );
    }
}

推荐阅读