传递异步存储数据以响应导航抽屉组件

Question

在我的本机应用程序的应用程序抽屉中，我有一些个人资料信息数据，例如姓名，电子邮件和手机号码。当用户从异步存储中登录时，我想将数据传递到自定义应用程序抽屉组件。基本上，问题在于将异步存储数据传递给功能组件。

const AppDrawerNavigator = createDrawerNavigator ({
  Home: {
    screen : Maps,
    navigationOptions: () => ({
      title: `Search by`
    })
  },
  Vendor: {
    screen: HomeScreen,
    navigationOptions: () => ({
      title: `Vendor List`,
    })
  },
  Notifications: NotificationsScreen,
  Events: SearchDetails,
  Venue : {
    screen: SearchScreen,
    navigationOptions: () => ({
      title: `Venue Availability`,
    })
  },
  Settings: {
    screen: SettingsScreen
  }
}, {
  drawerPosition: 'left',
  contentComponent: customDrawerContentComponent,
  drawerOpenRoute: 'DrawerOpen',
  drawerCloseRoure: 'DrawerClose',
  drawerToggleRoute: 'DrawerToggle',
  drawerWidth: 320,
  contentOptions: {
    activeTintColor: '#fff',
    inactiveTintColor: '#030303',
    activeBackgroundColor: '#B90066',
    inactiveBackgroundColor: '#fff',
    itemsContainerStyle: {
      marginHorizontal: 10
    },
    itemStyle: {
      height: 40,
      borderRadius: 60,
    },
    activeLabelStyle: {
      fontSize: 20, 
      fontWeight: 'normal'
    }
  }
  })
  
  const AppSwitchNavigator = createSwitchNavigator({
  AuthLoadingScreen: AuthLoadingScreen,
  Auth: AuthStackNavigator,
  App: {
    screen: AppDrawerNavigator
  }
})


const WeTaAppDrawer = createAppContainer(AppSwitchNavigator)

export default class App extends Component {
  render() {
    return <WeTaAppDrawer />
  }
}

Answer 1

您可以在customDrawerContentComponent组件中使用componentDidMount并从asyncStorage获取用户数据，例如

async componentDidMount(){
  const user = await AsyncStroage.getItem('user);
  this.setState({ user });
}

然后您可以在渲染方法中使用状态