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

Question

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

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

我的抽屉可以工作，但是一旦我从登录页面进入主页（食谱），我可以看到显示后退按钮，并且我似乎无法按照react-native-drawer-layout 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>
  );
}

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

Answer 1

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

Answer 2

在场景组件上使用 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/>} />

Answer 4

我必须使用

headerBackVisible: false

，如下所示。

<Stack>
      <Stack.Screen
        name="(top-tabs)"
        options={{
          headerShown: true,
          title: 'Top Tabs',
          headerBackTitleStyle: {},
          headerStyle: {
            backgroundColor: colors.whatsappTeal,
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
          },
          headerBackground: () => {
            return <></>;
          },
          headerRight: () => {
            return null;
          },
          headerLeft: () => {
            return null;
          },
          headerBackVisible: false,
        }}
      />
    </Stack>