React Native Logout внутри DrawerNavigator
Я хочу вернуться из DrawerNav в раздел «Вход». Использование alert («Alert») внутри функции - нормально.
У меня есть StackNavigator с логином и DrawerNav
const MyStackNavigator = StackNavigator({
Login : { screen : Login },
DrawerNav : { screen : DrawerNav }
}, {
navigationOptions : { header : false }
}
);
Из входа я могу перейти к своему главному экрану DrawerNav, используя
_login = () => {
this.props.navigation.navigate('DrawerNav');
}
Внутри DrawerNav находится DrawerNavigator (очевидно).
const MyDrawerNavigator = DrawerNavigator({
... screens ...
}, {
initialRouteName : '',
contentComponent : CustomContent,
drawerOpenRoute : 'DrawerOpen',
drawerCloseRoute : 'DrawerClose',
drawerToggleRoute : 'DrawerToggle'
}
);
const CustomContent = (props) => (
<View>
<DrawerItems {...props} />
<TouchableOpacity
onPress = { this._logout }>
<Text style = { styles.logout }>Logout</Text>
</TouchableOpacity>
</View>
)
Как видите, выход из системы не является частью меню, а находится внутри ящика.
_logout = () => {
this.props.navigation.navigate('Login');
}
Это дает мне ошибку
undefined is not an object (evaluating '_this.props.navigation')
Ответы 4
Проблема
this в this._logout предназначен для ссылки на экземпляр CustomContent, но поскольку CustomContent является функциональным компонентом (у которого нет экземпляров), любая ссылка this не должна быть действительной, но не вызывает ошибки из-за Жук.
Решение
Изменять
onPress = {this._logout}
к
onPress = {() => props.navigation.navigate('Login')}
вы можете видеть, что я отредактировал проблему, это та же проблема, что и предыдущая проблема
@ArgusMalware, который выглядит как совершенно другая проблема (с другим сообщением об ошибке).
Вам придется создать новый вопрос, поскольку ваши правки, вероятно, не будут одобрены, поскольку они изменяют характер исходного вопроса.
Поскольку вы достаточно глубоко погрузились в свой стек навигации, не имеет ли смысла использовать функцию popToTop?
В том же файле убедитесь, что вы определили свою функцию _logout как свою CustomContent, тогда вы можете сделать что-то вроде следующего:
- Обновите вызов функции, передав им
props - Обновите
_logout, чтобы использоватьpopToTop()
Вот как будет выглядеть мой код.
_logout = (props) => {
props.navigation.popToTop();
}
const CustomContent = (props) => (
<View>
<DrawerItems {...props} />
<TouchableOpacity
onPress = { () => this._logout(props) }>
<Text style = { styles.logout }>Logout</Text>
</TouchableOpacity>
</View>
)
Вы захотите передать props функции, поскольку она будет содержать вашу опору navigation и позволит вам делать вызовы в вашем стеке навигации.
Измените свой customComponent на компонент класса с функционального.
class CustomContent extends Component {
_logout = () => {
const resetAction = NavigationActions.reset({
key: null,
index: 0,
actions: [NavigationActions.navigate({ routeName: 'Login' })],
});
this.props.navigation.dispatch(resetAction);
}
render() {
return (
<View>
<DrawerItems {...props} />
<TouchableOpacity
onPress = {this._logout}
>
<Text style = {styles.logout}>Logout</Text>
</TouchableOpacity>
</View>
);
}
}
ПРИМЕЧАНИЕ:Лучшая практика для реализации экранов авторизации - это использование переключить навигатор. Если по какой-то причине вы не должны его использовать, вам могут помочь следующие вещи.
1: Как ответил @Asrith K S, измените свой функциональный компонент на компонент класса и запишите _logout как функцию класса, где this.props будет иметь navigation
(или же)
2: запишите действие навигации как анонимная функция.
const CustomContent = (props) => (
<View>
<DrawerItems {...props} />
<TouchableOpacity
onPress = { () => props.navigation.navigate("Login") }>
<Text style = { styles.logout }>Logout</Text>
</TouchableOpacity>
</View>
)
Я тоже получаю ту же ошибку. кто-нибудь может помочь?