Question

我最近开始在React Native中进行编码，但是找不到在我的视图中添加标头的好方法。我正在使用createMaterialBottomTabNavigator()，因此无法添加createStackNavigator()。

所以我的问题很简单。如何使用BottomTabNavigator向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

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

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

在v.5中向BottomTabNavigator添加标头

1 个答案: