Как добавить пользовательский DrawerItem для выхода из системы - PullRequest
Новая
       71

Как добавить пользовательский DrawerItem для выхода из системы

0 голосов
/ 31 января 2020

Аналогично этому вопросу Я хотел добавить кнопку выхода из системы в нижний колонтитул DrawerNavigation, и я сделал это.

Но проблема в том, что я не смог найти способ перенаправления на экран входа в систему, поскольку this.props.navigation.navigate('Login') недоступен за пределами класса.

Как мне как-то перейти на экран входа в систему без реквизита?

Вот как выглядит мое приложение. js выглядит так: 

/* imports etc.. 
...
*/

export default class App extends React.Component { 
  render() {
    return (
      <SwitchNavigator />
    );
  }
}

const logout = async () => {
  await AsyncStorage.removeItem('userToken'); // remove token
  // Once the token is removed, navigate to Login screen.. But how.

}

const DrawerNavigationComponent = (props) =>(
    <Container>
      <Header >
        <Text>Header</Text>
      </Header>
      <Content>
        <DrawerItems 
          {...props}
          />
      </Content>
      <Footer>
        <TouchableOpacity
            onPress = { logout }
            style={{width: '100%' }}>
              <View style={{ flex: 1, marginLeft:10, alignItems: 'center', flexDirection:'row', alignItems: 'center' }}>
                <Icon name="ios-log-out" style={{marginRight: 10, color: 'white'}} size={20}/>
                <Text style={{color: 'white'}}>Logout</Text>
              </View>
        </TouchableOpacity>
      </Footer>
    </Container>
  );

const DrawerNavigation = createAppContainer(
  createDrawerNavigator({
    Home: Dashboard
  }, {
    contentComponent: DrawerNavigationComponent
  })
);

/* Login & Register */
const StackNavigation = createAppContainer(
  createStackNavigator({
    Welcome: Welcome, // show login & register buttons
    Login: Login,
    Register: Register
  })
);

/* 1 time screen */
const SwitchNavigator = createAppContainer(
  createSwitchNavigator({
    AuthLoadingScreen: AuthLoadingScreen, // check if userToken exists
    App: DrawerNavigation, // if yes, redirect here
    AuthenticationScreen: StackNavigation, // if not, redirect here
  })
);

1 Ответ

0 голосов
/ 31 января 2020

Один из способов - сохранить ваш контент в отдельном файле и экспортировать его по умолчанию, используя withNavigation () HO C от реагирующего маршрутизатора.

Другой способ - передать реквизиты контенту с помощью функции стрелки 

const DrawerNavigation = createAppContainer(
createDrawerNavigator({
  Home: Dashboard
}, {
  contentComponent: props => <DrawerNavigationComponent {...props} />
})
);
...