我刚开始React本土。
如何更改主页选项卡上的粉色飞溅颜色？

的数据
这张截图来自一台android 12设备，但我在一个较旧的android版本上试过，没有那种飞溅的粉红色，而是标准的android涟漪效果。

app.tsx

import { StatusBar } from 'react-native';

import { NavigationContainer } from '@react-navigation/native';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';

import Settings from './screens/settings';
import Home from './screens/home';
import Search from './screens/search';

const Tab = createMaterialBottomTabNavigator();

import {
    StyleSheet,
    SafeAreaView,
} from "react-native";
import React from 'react';
import { Icon } from 'react-native-elements';

export default function App() {
    return (
        <SafeAreaView style={styles.background}>
            <NavigationContainer>
                <Tab.Navigator
                    initialRouteName="Home"
                    shifting={true}
                    barStyle={{ backgroundColor: 'rgb(220, 220, 220)' }}
                    activeColor="black"
                    compact={false}
                    sceneAnimationEnabled={true}
                    inactiveColor='grey'
                >

                    <Tab.Screen name="Settings" component={Settings} options={{
                        tabBarIcon: ({ focused, color }) => (
                            <Icon type='ionicon' name={focused ? 'settings' : "settings-outline"} color={color}></Icon>
                        ),
                    }} />
                    <Tab.Screen name="Home" component={Home} options={{
                        tabBarIcon: ({ focused, color }) => (
                            <Icon type='ionicon' name={focused ? 'home' : "home-outline"} color={color}></Icon>
                        ),
                    }} />
                    <Tab.Screen name="Search" component={Search} options={{
                        tabBarIcon: ({ focused, color }) => (
                            <Icon type='ionicon' name={focused ? 'search' : "search-outline"} color={color}></Icon>
                        ),
                    }} />

                </Tab.Navigator>
            </NavigationContainer>
            <StatusBar backgroundColor={'#fff'} barStyle={'dark-content'}></StatusBar>
        </SafeAreaView >
    );
}

const styles = StyleSheet.create({
    background: {
        backgroundColor: "#fff",
        flex: 1.0
    },
});

字符串

设置.tsx

function Settings() {
    return (
        <SafeAreaView style={styles.background}>

        </SafeAreaView >
    );
}

型

home.tsx

function Home() {
    return (
        <SafeAreaView style={styles.background}>

        </SafeAreaView >
    );
}

型

搜索.tsx

function Search() {
    return (
        <SafeAreaView style={styles.background}>

        </SafeAreaView >
    );
}

型
我删除了一些不相关的部分，在家里，设置和搜索页面，为清晰。
我尝试了我能想到的任何设置，但我没有找到任何可以改变丑陋的粉红色。