Как я могу изменить параметры моего BoxNavigator с React Native, когда пользователь вошел в систему

Question

Мне нужно изменить содержимое моего DrawerNavigator после того, как пользователь вошел в систему.

Может кто-нибудь помочь мне, пожалуйста?

Answer 1

Вы можете сделать свой собственный DrawerNavigator и динамически изменить его View или Контент.Вот пример:

public static Routes = DrawerNavigator({
    Main: {
        screen: StackNavigator({
            Home: { screen: Home },
            Contents: { screen: Contents },
            ContentList: { screen: ContentList },
        }, stackConfig('Home'))
    },
    MessageInbox: { screen: MessageInbox },
    UserInfo: { screen: UserInfo}
}, {
        initialRouteName: 'Main',
        drawerWidth: 300,
        drawerPosition: Platform.OS == 'ios' ? 'left' : 'right',
        contentComponent: (props: any) => (
            <DrawerComponent properties={props} />
        )
    }
)

DrawerComponent.js:

import React from 'react'
import { View, Platform, Text, Image, ScrollView, TouchableOpacity, AsyncStorage } from 'react-native'
import { DrawerItems, NavigationActions } from 'react-navigation'
import Icon from 'react-native-vector-icons/Ionicons';

export default class DrawerComponent extends React.PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      user: null,
      avatarPic: 'avatars/0-1.png',
    }
  }

  componentDidMount() {
    this.fetchData()
  }


  fetchData = async () => {
    let data = await AsyncStorage.getItem('UserData')
    this.setState({ user: data })
  }

  render() {
    let { user } = this.state
    return (
      <ScrollView contentContainerStyle={{ flex: 1 }}>
        <View style={{ width: '100%', height: '30%', backgroundColor: 'white' }}>
          <Image
            style={{ width: 50, height: 50 }}
            source={{ uri: this.state.avatarPic }}
          />

          <TouchableOpacity
            onPress={() => {
              this.props.properties.navigation.navigate('UserInfo')
            }}
            style={{ marginTop: 10 }}>
            <Text>{user.name ? user.name : 'New User'}</Text>
          </TouchableOpacity>

        </View>

        <DrawerItems {...this.props.properties} />

      </ScrollView>
    )
  }
}

Надеюсь, это поможет вам.