react-native - 使用 react-native-router-flux 删除抽屉页面的后退按钮

Question

我一直在尝试创建一个应用程序来学习本机反应，它有一个登录界面，在成功验证后，用户会被重定向到带有导航抽屉的主页——这是当今大多数移动应用程序的标准。

我使用react-native-router-flux和react-native-drawer-layout来实现这个。

我让抽屉工作了，但是一旦我从登录页面进入主页（食谱），我可以看到一个后退按钮正在显示，我似乎无法按照 react-native-drawer-layout API no 中的说明设置抽屉图标不管我怎么尝试。

我认为问题出在我的路由器上，为这个特定场景定义的场景如下。

const App = () => {
  return (
    <Router navigationBarStyle={styles.navBar}
            titleStyle={styles.navTitle}
            sceneStyle={styles.routerScene}
            barButtonIconStyle={styles.barButton} >
      <Scene key="root">
        <Scene key="login"
          component={Login}
          title="Login"
          hideNavBar = {true}
          initial

        />
         <Scene
          key="recipes"
          component={Recipes}
          title="Recipes"
          hideNavBar = {false}
          hideBackImage = {false}
          //backButtonImage = {require('image!ui_nav_bar_hamburgher_icon')}
          onBack = {() =>{return null;}}
          rightTitle = "Bad Hombres"
          onRight = {() => { Alert.alert(
            'No puppet, No puppet',
            'You\'re the puppet!',)}}
          leftTitle ="Bigly"
          onLeft = {() => {Alert("Such a nasty woman..")}}
         // leftButtonImage={require('image!ui_login_email_icon')}

          panHandlers ={null}
        />
      </Scene>

    </Router>
  );
}

有人可以帮我弄清楚我在这里缺少什么吗？非常欣赏它。

Answer 1

我用 renderLeftButton 来渲染抽屉菜单。您应该使用 renderBackButton= { null } 来隐藏后退按钮。在此处记录https://github.com/aksonov/react-native-router-flux/blob/master/docs/API_CONFIGURATION.md

Answer 2

在 Scene 组件上使用 hideBackImage 道具

Answer 3

我试图删除后退按钮，我终于找到了。有两种情况。首先从 react-native 导入视图。如果您想删除“返回文本”标题并且只需要箭头返回按钮。

import { View } from 'react-native';

<Scene key="home" component={FooterMenu} title="User Home" renderBackButton={()=>null} />

如果您想删除所有内容。

<Scene key="home" component={FooterMenu} title="User Home" renderBackButton={()=><View/>} />