React Native Tab导航栏背景色及选中文字颜色无法修改，求解决方法

问题根源 #

你当前代码里用的tabBarOptions是React Navigation旧版本（4及以下）的配置方式，在React Navigation 5+版本中，这个配置项已经被废弃，直接嵌套使用不会生效，需要改用新的顶层属性来配置Tab导航栏样式。

解决代码 #

修改后的完整代码如下：

<NavigationContainer>
  <Tab.Navigator
    screenOptions={{
      // 设置导航栏背景色
      tabBarStyle: {
        backgroundColor: 'red',
      },
      // 设置选中项的文字/图标颜色
      tabBarActiveTintColor: '#ffd700', // 示例用金色，可替换成你需要的颜色
      // 可选：设置未选中项的文字/图标颜色
      tabBarInactiveTintColor: '#888',
    }}
  >
    <Tab.Screen
      name="My Family"
      component={Family}
      options={{
        tabBarIcon: () => (
          <Ionicons style={styles.icon} name="people-outline" />
        ),
      }}
    />
    <Tab.Screen
      name="Edit Family"
      component={EditFamily}
      options={{
        tabBarIcon: () => (
          <Ionicons style={styles.icon} name="create-outline" />
        ),
      }}
    />
    <Tab.Screen
      name="My Profile"
      component={MyProfile}
      options={{
        tabBarIcon: () => (
          <Ionicons style={styles.icon} name="person-outline" />
        ),
      }}
    />
  </Tab.Navigator>
</NavigationContainer>

关键修改点说明 #

• 用tabBarStyle替代原来嵌套在tabBarOptions里的style，直接配置导航栏背景色
• 用tabBarActiveTintColor设置选中项的文字和图标的颜色
• 可选的tabBarInactiveTintColor可以统一设置未选中项的颜色

内容的提问来源于stack exchange，提问作者stavros