更改选项卡上的背景反应本机应用程序

Question

你好，你能帮我改变选项卡下的黑色吗，这个颜色似乎有自己的视图或者必须使用道具来改变。如果使用道具更改它，哪些道具可能能够更改颜色/使用其他可能的方法。如果有我可以获得并且可以阅读的参考资料，也许我会更高兴。

亲切的问候

玫瑰花

谢谢你

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 (
    <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, // Lebar border
                  borderColor: "white", // Warna border
                  borderRadius: 50, // Membuat border menjadi bulat
                  width: 60,
                  height: 60,
                  justifyContent: "center", // Memusatkan secara horizontal
                  alignItems: "center", // Memusatkan secara vertikal
                  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>
  );
}

Answer 1

我认为有几种方法可以实现这一目标，但我不知道到底哪种方法有效。

您可以使用道具

tabBarBackground

接受可以在那里渲染的组件，然后用您想要的

View

渲染

backgroundColor

。更多相关内容这里

您也可以用

Tab.Navigator

包裹整个

View

，就像这里

在上面的链接中还有另一种方法，如果您将此

Tab.Navigator

嵌套在另一个

Stack.Navigator

中（link）

Answer 2

这是一个示例

import * as React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

function ProfileScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Profile!</Text>
    </View>
  );
}

const CustomTab = ({ state, navigation, descriptors, route, index }) => {
  const { options } = descriptors[route.key];
  const label =
    options.tabBarLabel !== undefined
      ? options.tabBarLabel
      : options.title !== undefined
      ? options.title
      : route.name;

  const isFocused = state.index === index;

  const onPress = () => {
    const event = navigation.emit({
      type: 'tabPress',
      target: route.key,
    });

    if (!isFocused && !event.defaultPrevented) {
      navigation.navigate(route.name);
    }
  };

  const onLongPress = () => {
    navigation.emit({
      type: 'tabLongPress',
      target: route.key,
    });
  };

  return (
    <TouchableOpacity
      accessibilityRole="button"
      accessibilityState={isFocused ? { selected: true } : {}}
      accessibilityLabel={options.tabBarAccessibilityLabel}
      testID={options.tabBarTestID}
      onPress={onPress}
      onLongPress={onLongPress}
      style={{ flex: 1, backgroundColor: isFocused ? '#ff0000' : '#ff00ff' }}>
      <Text style={{ color: isFocused ? '#673ab7' : '#222' }}>{label}</Text>
    </TouchableOpacity>
  );
};

function MyTabBar({ state, descriptors, navigation }) {
  return (
    <View style={{ flexDirection: 'row', height: 80 }}>
      {state.routes.map((route, index) => {
        return (
          <CustomTab
            state={state}
            descriptors={descriptors}
            navigation={navigation}
            route={route}
            index={index}
          />
        );
      })}
    </View>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator tabBar={(props) => <MyTabBar {...props} />}
      >
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
        <Tab.Screen name="Profile" component={ProfileScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}