react-native 中的 BottomTabNavigator 上方的白线

Posted 2023-03-15

【中文标题】react-native 中的 BottomTabNavigator 上方的白线

【英文标题】：White line above BottomTabNavigator in react-native

【发布时间】：2020-02-21 10:47:34

【问题描述】：

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

问题的图片

任何关于如何使该线与背景颜色相同的想法将不胜感激。视图后面的默认背景颜色可能是“闪耀的”，因为它是白色的，我不知道如何更改它。该应用只能在我自己的 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
    
);

【问题讨论】：

我真的要问谢谢！ :)

【参考方案1】：

经过一番反复试验，我自己想通了。 NavigationContainer 的 Tab.Navigator 类有一个名为 tabBarOptions 的道具，它将样式表作为其 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
    
);

【参考方案2】：

你可以在下面的 screenOption 道具中的 tabBarStyle 中删除它

 <Tab.Navigator 
      screenOptions=
            tabBarStyle:borderTopWidth:0
                     
  />

【参考方案3】：

（由于链接太长，无法评论此答案）

这条线似乎无法删除。当 BottomTab 被渲染以区分 BottomTab 和屏幕的其余部分时，默认情况下会出现。浏览这个example 并尝试为“BottomTab”应用多种背景颜色，然后你就会明白一点。