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

Posted 2023-02-23

【中文标题】使用 react-native-router-flux 删除抽屉页面的后退按钮

【英文标题】：Remove back button for drawer page using 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')

【参考方案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/> />