在 v.5 中向 BottomTabNavigator 添加一个 header

Question

我最近开始使用 React Native 编写代码，但找不到向我的视图添加 header 的好方法。我正在使用 createMaterialBottomTabNavigator() 因此我无法添加 createStackNavigator().

所以我的问题很简单。如何使用 BottomTabNavigator 添加 header 到 React Native？

const MaterialBottomTab = createMaterialBottomTabNavigator()

export default function App() {
  return (
    <NavigationContainer>
      <MaterialBottomTab.Navigator
        initialRouteName="Home"
        activeColor="white"
        shifting={true}
        barStyle={styles.bottomBarStyle}
      >
        <MaterialBottomTab.Screen 
          name="Home" 
          component={Home}  
          options={{
            tabBarLabel: "Home",
            tabBarIcon: ({ color }) => (
              <MaterialIcons name="home" color={color} size={25}/>
            )
          }}
        />
        <MaterialBottomTab.Screen 
          name="History" 
          component={History}
          options={{
            tabBarLabel: "History",
            tabBarIcon: ({ color }) => (
              <MaterialIcons name="history" color={color} size={25}/>
            )
          }} 
        />
        <MaterialBottomTab.Screen 
          name="New"
          component={AddFood} 
          options={{
            tabBarLabel: "New",
            tabBarIcon: ({ color }) => (
              <MaterialIcons name="add" color={color} size={25}/>
            )
          }}
        />
      </MaterialBottomTab.Navigator>
    </NavigationContainer>
  );
}

Answer 1

如果您将每个选项卡的所有屏幕都变成堆栈导航器，它们将具有 header。或者，您可以创建一个自定义 header 组件，将其放入每个屏幕中，而无需将它们转换为堆栈。

此处的文档：https://reactnavigation.org/docs/nesting-navigators/

在 v.5 中向 BottomTabNavigator 添加一个 header

Add a header to BottomTabNavigator in v.5

react-native

react-navigation

react-navigation-v5