如何更改createMaterialBottomTabNavigator标签样式（react-native）？

Question

createMaterialBottomTabNavigator是一个非常好的解决方案，用于在 上添加 BottomTabNavigation react-native，但我还没有找到一种方法来设置其标签的样式，这可能吗？

Answer 1

(react-navigation-material-bottom-tabs) 的官方文档没有提供任何用于设置标签样式的内容，但您可以按如下方式设置它们的样式：

navigationOptions: {
    tabBarLabel: <Text style={{fontFamily : "pacifico", textAlign : "center"}}>Meals</Text>,
    tabBarIcon: (tabInfo) => {
        return (<MaterialCommunityIcons name="food-fork-drink" size={23}
            color={tabInfo.tintColor}></MaterialCommunityIcons>)
    },
    tabBarColor: "#222f3e"
}

tabBarLabel通过将其包装在组件中，直接将样式应用于Text。

Answer 2

在React Navigation V6，你可以试试这个。

<Tab.Screen
    name="Home"
    component={Home}
    options={{
      tabBarLabel: <Text style={styles.tabBarLabel}>Home</Text>
    }}
/>

// Stylesheet

const styles = StyleSheet.create({
  tabBarLabel: {
    fontSize: 12,
    color: Colors.darkGreen,
    textAlign: 'center',
    fontFamily: 'Poppins',
    fontWeight: 'bold',
  },
});