1

我在从 AsyncStorage 获得的构造函数中有一个变量“this.state.userName”，它在构造函数中记录完美。我希望它呈现在反应导航的导航抽屉的标题中。因为我是 react-native 的新手，所以我对流程感到非常困惑。我已经浪费了一整天。标题上的结果为 null 或没有显示任何文本，也没有任何错误。

'this.setState.userName' 的 setState 的回调：06-15 00:40:22.211 20510 29463 I ReactNativeJS: { userName: 'Ramesh mike' }

我尝试了以下结构：

 class ScreensSetup extends Component {

   toggleDrawer = () => {
     this.props.navigationProps.toggleDrawer();
   };

   constructor(props) {
     super(props);

     AsyncStorage.getItem('KeyUserName').then(value =>{
       this.setState({ userName: value}, () => console.log(this.state) );           
     });

     AsyncStorage.getItem('KeyUserEmail').then(value =>{
       this.setState({ userEmail: value });
     });

     AsyncStorage.getItem('KeyUserProfilePicture').then(value =>{
       this.setState({ userProfilePicture: value });
     });
   }

   render() {
     return (
       <View style={{ flexDirection: 'row' }}>
         <TouchableOpacity
           onPress={this.toggleDrawer}
           style={{padding: 15,}}
         >
           <Icon ios="ios-menu" android="md-menu" size={30} color="white" />
         </TouchableOpacity>
       </View>
     );
   }
 }

 const FirstStackNavigator = createStackNavigator({
   First: {
     screen: Dashboard,
     navigationOptions: ({ navigation }) => ({
       title: 'Dashboard',
       headerLeft: <ScreensSetup navigationProps={navigation} />,
       headerStyle: {
        backgroundColor:  'rgb(216,21,88)',
       },
       headerTintColor: 'white',
     }),
   },
 });

 const SecondStackNavigator = createStackNavigator({
   Second: {
     screen: Workorders,
    ................
 });

 const ThirdStackNavigator = createStackNavigator({
   Third: {
     screen: Projects,
   .............
 });

 const FourthStackNavigator = createStackNavigator({
   Fourth: {
     screen: Settings,
  ...............
 });


 DrawerContent = (props) => {
   return (
     <View>
       <View style={{ backgroundColor: 'rgb(216,21,88)', height: 160,}}>

             <Text>{this.state.userName}</Text>    //No display of userName

       </View>
       <DrawerItems {...props} />
     </View>
   )
 }

 const DrawerNavigator = createDrawerNavigator(
   {
     Dashboard: {
       //Title
       screen: FirstStackNavigator,
       navigationOptions: {
         drawerLabel: 'Dashboard',
         drawerIcon: () => (
           <Icon ios="ios-heart" android="md-heart" size={30} color="black" />
         ),
       },
     },
     Workorders: {
      ...
     },
     Projects: {
       ...
     },
     Settings: {
       ...
     },
   },
   {
     contentComponent: DrawerContent,
     initialRouteName: 'Dashboard',
     drawerWidth: 280,
     drawerPosition: 'left',
     gesturesEnabled: false,
     headerMode: 'float',
     contentOptions: {
       labelStyle: {
         color: 'black'
       }
     }
   },
 );

 const styles = StyleSheet.create({...})

 export default DrawerNavigator
4

1 回答 1

0

您可以尝试以下方法：

Promise.all([
  AsyncStorage.getItem('KeyUserName'),  
  AsyncStorage.getItem('KeyUserEmail'),  
  AsyncStorage.getItem('KeyUserProfilePicture')
]).then(
  ([userName,userEmail,userProfilePicture])=>
    this.setState({ userName,userEmail,userProfilePicture })
)
于 2019-06-14T19:02:45.983 回答