Question

我有3个屏幕。 A =>登录，B =>信息中心，C =>个人资料。

最初，当用户未登录时，将显示“登录”屏幕。登录后，我已使用AsyncStorage保存userId（我从API响应中获取）。如果用户已经登录并打开应用程序，则我已将用户重定向到“仪表板”页面。

这些是我的代码实现面临的问题。

登录后，如果用户按“仪表板”页面（Andriod）上的“后退”按钮，它将导航回到登录屏幕。这次没有调用componentDidMount（）方法，因此我无法检查用户是否来自仪表板屏幕。
我尝试使用条件=>在Dashboard的componentDinMount（）方法上注册BackHandler事件，如果用户按下后退按钮，应用程序将退出，但是问题是我无法在同一屏幕上删除此事件，所以如果从仪表板转到“个人资料”屏幕，如果我按后退按钮，则从“个人资料”页面进入应用程序。

我要实现的是，登录后，直到用户按下注销按钮，用户才不能进入登录屏幕。

Answer 1

从“登录屏幕”导航到“仪表板”时，只需使用开关导航器而不是堆栈导航器即可实现。

const MainStack = createStackNavigator({
    DashboardScreen: Dashboard,
    ProfileScreen: Profile
});

export default createAppContainer(createSwitchNavigator({
  LoginScreen: Login,
  Main: MainStack
}));

Answer 2

您需要重置导航历史记录才能实现

这是我的一个项目中的片段，我需要这样做：

this.props.navigation.reset([NavigationActions.navigate({ routeName: 'DevicesList'})], 0);

Answer 3

为此，我建议使用SwitchNavigator（如果使用react-navigation）。这将使前一个屏幕（在本例中为您的LoginScreen）卸下，除非您明确告诉它导航到该屏幕，否则您将无法返回该屏幕。

否则，您仍然可以在DashBoard屏幕中使用自定义的backHandling，并使用react-navigaton withNavigationFocus HOC。

componentDidMount将与您的第一次尝试保持不变。您需要使用componentDidUpdate并检查isFocused道具，例如：

componentDidUpdate = prevProps => {
   if (prevProps.isFocused !== this.props.isFocused) {
        this.props.isFocused ? this.backHandler = BackHandler.addEventListener('hardwareBackPress', this.handleBackPress) :
        this.backHandler.remove()
   }
}

让我知道您是否对其中一种解决方案有疑问

Answer 4

React Navigation v5 文档涵盖了这个用例。 documentation link

在React Native中成功登录后防止用户返回登录屏幕

4 个答案: