如何在react-native-router-flux中更改root？

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的类型prop设置为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>
  )
};

​