React Native Expo Router Tabs底部黑色背景修改技术咨询

您好，我想修改Tabs下方的黑色背景，该背景似乎属于独立视图或需通过props修改。请问可通过哪些props或其他方法修改颜色？若有可供查阅的参考资料就更好了。

此致
rosid
谢谢

修改Tabs下方黑色背景的方法 #

方法1：外层包裹View设置全局背景

如果黑色背景是Tabs组件所在容器的默认背景，直接在外层套一个View并设置背景色即可：

import React from "react";
import FontAwesome from "@expo/vector-icons/FontAwesome";
import { View } from "react-native";
import MaterialIcons from "@expo/vector-icons/MaterialIcons";
import { Tabs } from "expo-router";

export default function TabLayout() {
  return (
    <View style={{ flex: 1, backgroundColor: "#f5f5f5" }}>
      <Tabs
        screenOptions={{
          tabBarActiveTintColor: "white",
          tabBarStyle: {
            height: 70,
            borderTopLeftRadius: 40,
            borderTopRightRadius: 40,
            backgroundColor: "black",
          },
          tabBarLabelStyle: {
            fontSize: 12,
            fontWeight: "bold",
            marginBottom: 10,
          },
        }}
      >
        <Tabs.Screen
          name="index"
          options={{
            title: "Home",
            tabBarIcon: ({ color }) => (
              <FontAwesome size={28} name="home" color={color} />
            ),
            headerShown: false,
          }}
        />
        <Tabs.Screen
          name="history"
          options={{
            title: "History",
            tabBarIcon: ({ color }) => (
              <MaterialIcons size={28} name="event-note" color={color} />
            ),
          }}
        />
        <Tabs.Screen
          name="presence"
          options={{
            title: "Presensi",
            tabBarIcon: ({ color }) => (
              <>
                <View
                  style={{
                    borderWidth: 2,
                    borderColor: "white",
                    borderRadius: 50,
                    width: 60,
                    height: 60,
                    justifyContent: "center",
                    alignItems: "center",
                    marginBottom: 20,
                    backgroundColor: "black",
                  }}
                >
                  <FontAwesome size={28} name="map-marker" color="#FF204E" />
                </View>
              </>
            ),
          }}
        />
        <Tabs.Screen
          name="schedule"
          options={{
            title: "Schedule",
            tabBarIcon: ({ color }) => (
              <MaterialIcons size={28} name="schedule" color={color} />
            ),
          }}
        />
        <Tabs.Screen
          name="profile"
          options={{
            title: "Profile",
            tabBarIcon: ({ color }) => (
              <FontAwesome size={28} name="user-circle" color={color} />
            ),
          }}
        />
      </Tabs>
    </View>
  );
}

方法2：通过sceneContainerStyle统一设置页面背景

如果黑色背景是每个Tab页面的容器背景，可在Tabs的screenOptions中添加sceneContainerStyle属性，统一修改所有页面的背景色：

<Tabs
  screenOptions={{
    tabBarActiveTintColor: "white",
    tabBarStyle: {
      height: 70,
      borderTopLeftRadius: 40,
      borderTopRightRadius: 40,
      backgroundColor: "black",
    },
    tabBarLabelStyle: {
      fontSize: 12,
      fontWeight: "bold",
      marginBottom: 10,
    },
    // 设置所有Tab页面的背景色
    sceneContainerStyle: {
      backgroundColor: "#f5f5f5"
    }
  }}
>
  {/* 各个Tabs.Screen */}
</Tabs>

方法3：单独修改特定页面背景

若只需修改某个Tab页面的背景，可在对应Tabs.Screen的options中单独设置sceneContainerStyle：

<Tabs.Screen
  name="index"
  options={{
    title: "Home",
    tabBarIcon: ({ color }) => (
      <FontAwesome size={28} name="home" color={color} />
    ),
    headerShown: false,
    // 单独设置该页面的背景色
    sceneContainerStyle: {
      backgroundColor: "#e8f4f8"
    }
  }}
/>

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