如何更改 react-native-router-flux 中的根目录？

Question

我正在使用 react-native-router-flux v4，这是我的路由器组件：

const RouterComponent = () => {
  return (
    <Router>
      <Scene key="root">
        <stack key="auth">
          <Scene
            key="login"
            component={LoginForm}
            title="Please Login"
          />
        </stack>
        <stack key="main">
          <Scene
            key="RestaurantListing"
            component={RestaurantListing}
            title="Restaurants available"
          />
        </stack>
      </Scene>
    </Router>
  )
};

当我转到 main 时，我看到“RestaurantListing”组件，但我仍然在顶部导航中看到后退箭头（

我不希望用户能够返回身份验证页面，我该怎么做？

Answer 1

您应该首先将 hideNavBar 作为道具添加到场景 RestaurantListing，或者如果 main 的子项都不会使用导航栏，则可以将其添加到 main。您还需要从 'react-native-router-flux' 导入 ActionConst 并将 main 的 type 属性设置为 ActionConst.RESET 重置堆栈，从而从后台堆栈中删除您的身份验证页面。

import { Scene, Router, ActionConst } from 'react-native-router-flux';

const RouterComponent = () => {
  return (
    <Router>
      <Scene key="root">
        <stack key="auth">
          <Scene
            key="login"
            component={LoginForm}
            title="Please Login"
          />
        </stack>
        <stack key="main" type={ActionConst.RESET}>
          <Scene
            key="RestaurantListing"
            component={RestaurantListing}
            title="Restaurants available"                
            hideNavBar
          />
        </stack>
      </Scene>
    </Router>
  )
};