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

【问题标题】：Remove back button for drawer page using react-native-router-flux使用 react-native-router-flux 删除抽屉页面的后退按钮
【发布时间】：2016-10-24 05:41:25
【问题描述】：

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

我已经使用react-native-router-flux 和react-native-drawer-layout 来实现这一点。

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

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

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>
  );
}

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

【问题讨论】：

backButtonImage 应该可以工作。可能是坏人:)
backButtonImage = {require('image!ui_nav_bar_hamburgher_icon')} 不再起作用。试试backButtonImage = {require('../path/to/your/image')}

标签： react-native react-router react-native-router-flux react-native-ios

【解决方案1】：

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

【讨论】：

【解决方案2】：

在 Scene 组件上使用 hideBackImage 属性

【讨论】：

【解决方案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/>} />

【讨论】：