Question

我想使用React Navigation V5控制应用程序标题中的图标。

React Navigation结构如下。

DrawerNavigator
  StackNavigator
    TabNavigator
      HomeScreen
      AreaScreen
      EventScreen

我想在选择主页选项卡时显示标题的右侧图标，并在选择区域和事件选项卡时将其隐藏。

这是代码。

bottom.js

export default class BottomTabs extends Component {
  render() {
    return (
      <Tab.Navigator initialRouteName="Home" backBehavior="initialRoute">
        <Tab.Screen
          name="Home"
          component={Home}
          options={{
            tabBarIcon: () => <Icon name="home" />
          }}
        />
        <Tab.Screen
          name="Area"
          component={Area}
          options={{
            tabBarIcon: () => <Icon name="map" />
          }}
        />
        <Tab.Screen
          name="Event"
          component={Event}
          options={{
            tabBarIcon: () => <Icon name="home" />
          }}
        />
      </Tab.Navigator>
    );
  }
}

stack.js

import BottomTabs from './bottom';

const Stack = createStackNavigator();

export const StackNavigator = () => {
  return (
    <Stack.Navigator
      initialRouteName="Tab"
      headerMode="screen"
      screenOptions={{
        header: ({ scene, previous, navigation }) => {
          const { options } = scene.descriptor;
          const title =
            options.headerTitle !== undefined
              ? options.headerTitle
              : options.title !== undefined
              ? options.title
              : scene.route.name;

          return (
            <Header>
              <Left>
                {previous ? (
                  <Button
                    transparent
                    androidRippleColor={{ color: '#fff', borderless: false }}
                    onPress={() => {
                      navigation.goBack();
                    }}>
                    <Icon name="arrow-back" />
                  </Button>
                ) : (
                  <Button
                    transparent
                    onPress={() => {
                      navigation.openDrawer();
                    }}>
                    <Icon name="menu" />
                  </Button>
                )}
              </Left>
              <Body style={{ flex: 2 }}>
                <Title>{title}</Title>
              </Body>
              <Right>
                <Button transparent>
                  <Icon name="send" />
                </Button>
              </Right>
            </Header>
          );
        }
      }}>
      <Stack.Screen
        name="Tab"
        component={BottomTabs}
        options={{
          headerTitle: 'sample'
        }}
      />
    </Stack.Navigator>
  );
};

App.js

import 'react-native-gesture-handler';
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import DrawerContent from './src/layout/drawerContent';
import { StackNavigator } from './src/layout/stack';

const Drawer = createDrawerNavigator();

class App extends React.Component {
  render() {
    return (
      <NavigationContainer>
        <Drawer.Navigator drawerContent={props => <DrawerContent {...props} />}>
          <Drawer.Screen name="Home" component={StackNavigator} />
        </Drawer.Navigator>
      </NavigationContainer>
    );
  }
}

export default App;

这就是我想要的。 选择“主页”标签 enter image description here

选择另一个标签 enter image description here

请回答我的问题。谢谢。

根据React Navigation V5标签屏幕隐藏标题图标

0 个答案: