ios - react-native 中的 BottomTabNavigator 上方的白线

Question

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

任何关于如何使该线具有与背景相同颜色的想法将不胜感激。 View 后面的默认背景颜色可能是“闪耀的”，因为它是白色的，我不知道如何更改它。该应用程序只能在我自己的 iPhone XR 上运行，所以我不担心与 android 或其他 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
    }
});

Answer 1

编辑:自从我发布这个答案以来，API 发生了变化。如果这对您不起作用，请参阅下面的解决方案

经过一番反复试验，我自己弄清楚了。 Tab.Navigator NavigationContainer 的类别有一个名为 tabBarOptions 的 Prop 它将样式表作为其 style选项。当然，组件的边框也可以在这里更改。
这里有一个问题:设置 borderWidth为 0 不会隐藏导航上方的白色边框。仅设置borderTopWidth为 0 具有预期的效果。
所以完整的解决方案如下所示:

<NavigationContainer>
     <Tab.Navigator
         tabBarOptions={{
             activeTintColor: Colors.tabIconSelected,
             inactiveTintColor: Colors.tabIconDefault,
             style: styles.container
         }}/>
</NavigationContainer>

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