时间戳

首页 > 解决方案 > 防止用户在 android 上访问“Auth Loading Screen”

react-native - 防止用户在 android 上访问“Auth Loading Screen”

问题描述

在我的应用程序中（很可能像任何其他应用程序一样）我有一个加载屏幕，用于检查用户是否已登录。问题是，如果按下“返回”按钮，Android 上的用户现在有可能返回到该屏幕。我怎么可能避免用户这样做？

这就是我的代码：

const loadingStack = createSwitchNavigator({
  Loading: {
    screen: Loading
  }
}, {
  defaultNavigationOptions: {
    unmountOnBlur: true,
    headerMode: 'none',
    gestureEnabled: false
  }
}
);

export default createAppContainer(
  createStackNavigator({
    Loading: loadingStack,
    App: {
      screen: AppTabNavigator,
      navigationOptions: {
        gestureEnabled: false,
      },
    },
    Auth: {
      screen: AuthStack,
    },
...

标签： react-nativereact-native-android

解决方案

我看到两个解决方案：

  1. 更改您的导航并选择切换导航。
createAppContainer(
  createSwitchNavigator(
    {
      Loading: {
        screen: Loading,
        navigationOptions: {
          headerMode: 'none',
        }
      },
      App: {
        screen: AppTabNavigator,
        navigationOptions: {
          gestureEnabled: false
        }
      },
      Auth: {
        screen: AuthStack
      }
    }
  )
)
  1. 如果您想“享受” StackNavigator 的动画，当您从 Loading 导航到您的 App 时，您将用新视图替换当前视图。
//Example on your Loading Screen
this.props.navigation.replace({ routeName: "App" })

这会将您的加载屏幕视图替换为您的应用“视图”，当您返回时，您将不再被重定向到加载屏幕，因为它不再在堆栈中，它已被 App 替换。

编辑（回应评论，因为它太长了）：

在这种情况下，如果你想在 Home 上做一个特殊的 backButton 管理，你可以使用React Native BackHandler。

例如，如果您希望在单击 backButton 时不发生任何事情，请添加一个 eventListener，它无论如何都会返回true：

import { BackHandler } from 'react-native'
...

componentDidMount() {
    this.backHandler = BackHandler.addEventListener('hardwareBackPress', () => true)
}

componentWillUnmount(){
    this.backHandler.remove()
}

否则，如果您希望应用退出，例如：

this.backHandler = BackHandler.addEventListener('hardwareBackPress', () => BackHandler.exitApp())

推荐阅读