我刚开始用react-native开发一个应用程序，添加了一个底部导航，然后我开始设计组件的样式，注意到导航上方有一条白色，我无法摆脱它。
问题的图片

如果你知道如何让这条线与背景颜色相同，我将不胜感激。有可能视图背后的默认背景颜色是“闪亮的”，因为它是白色的，我不知道如何改变它。这款应用程序只能在我自己的iPhone XR上运行，所以我不担心与安卓或其他iPhone机型的兼容性
我是一个完全的react-native初学者，所以请耐心听我说，下面是我目前为止的代码：

导航

const Tab = createBottomTabNavigator();

export default function App() {
    return (
        <NavigationContainer>
            <Tab.Navigator
                tabBarOptions={{
                    activeTintColor: Colors.tabIconSelected,
                    inactiveTintColor: Colors.tabIconDefault,
                    style: styles.container
                }}>
                <Tab.Screen
                    name="Payments"
                    component={PaymentScreen}
                    options={{
                        tabBarIcon: ({focused}) => <TabBarIcon focused={focused} name="logout"/>
                    }}/>
                <Tab.Screen
                    name="Income"
                    component={IncomeScreen}
                    options={{
                        tabBarIcon: ({focused}) => <TabBarIcon focused={focused} name="login"/>
                    }}/>
            </Tab.Navigator>
        </NavigationContainer>
    );
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: Colors.darkBackgroundColor,
    }
});

付款视图

export default class PaymentScreen extends Component{
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.text}>Payments!</Text>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container:{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: Colors.backgroundColor,
    },
    text:{
        color: Colors.textColor
    }
});