Как «this.state.userName» в конструкторе может быть получен из «contentComponent» для размещения в секции заголовка ящика в реагирующей навигации? - PullRequest
Новая
       11

Как «this.state.userName» в конструкторе может быть получен из «contentComponent» для размещения в секции заголовка ящика в реагирующей навигации?

1 голос
/ 14 июня 2019

У меня есть переменная 'this.state.userName' в конструкторе, полученном из AsyncStorage, который идеально подходит для конструктора.Я хочу, чтобы он отображался в заголовке навигационной панели реакции-навигации.Я так запутался в потоке, как я новичок в реакции-родной.Я уже впустую весь день.Результат в заголовке равен нулю или текст не отображается. Никаких ошибок тоже нет.

Обратные вызовы setState для this.setState.userName: 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

1 Ответ

0 голосов
/ 14 июня 2019

Вы можете попробовать следующее: 

Promise.all([
  AsyncStorage.getItem('KeyUserName'),  
  AsyncStorage.getItem('KeyUserEmail'),  
  AsyncStorage.getItem('KeyUserProfilePicture')
]).then(
  ([userName,userEmail,userProfilePicture])=>
    this.setState({ userName,userEmail,userProfilePicture })
)
...