React Native 底部导航栏上方有白线

Question

我刚开始在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
    }
});

- pgr3931

---

我刚想问那个问题，谢谢！！！ :) - GOXR3PLUS

Answer 1

编辑：自我发表此答案以来，API已更改。如果此方法不适用于您，请参见下面的解决方案。

---

在进行一些尝试和错误之后，我自己找到了解决方案。 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
    }
});

- pgr3931

Answer 2

您可以在screenOption props中的tabBarStyle中删除它，如下所示。

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

- Mehrad Farahnak

---

无法正常工作。 - Patrick Waweru

borderTopColor: "black"，设置此属性会减少外观。但这取决于背景颜色。 - Patrick Waweru

Answer 3

使用 React Navigation 6.x

在我的情况下，我必须将 tabBarStyle 放在每个 Tab.Screen 上，例如：

<Tab.Screen name="HomeTab" component={xx} options={({ route }) => ({
    title: 'Home',
    tabBarStyle: {borderTop: 0},
})} />
<Tab.Screen name="SecondTab" component={xx} options={({ route }) => ({
    title: 'SecondTab',
    tabBarStyle: {borderTop: 0},
})} />
<Tab.Screen name="ThirdTab" component={xx} options={({ route }) => ({
    title: 'ThirdTab',
    tabBarStyle: {borderTop: 0},
})} />

- MisterJacket

Answer 4

在底部选项卡导航器v6中，您可以使用tabBarStyle属性来解决这个白线问题。

请确保设置了borderTopWidth:0。

screenOptions={({route}) =>({
    tabBarStyle: {
      height: IS_IPHONE ? RFValue(47) : RFValue(42),
      backgroundColor: AppTheme.colors.darkGrey,
      borderTopWidth: 0,
    },
}
)
}

- Zia

Answer 5

（由于链接过长，无法对此答案进行评论）

这一行似乎无法删除。当BottomTab被渲染以区分BottomTab和屏幕的其余部分时，它会默认出现。请查看example并尝试为`BottomTab'应用多个背景颜色，然后您将更清楚地了解。

- ThinkAndCode

Answer 6

我已经找到了解决这个问题的方法。

1. 进入node modules，找到@react-navigation文件夹
2. 现在打开bottom-tabs文件夹，然后打开src文件夹
3. 在views文件夹中，打开BottomTabBar.tsx
4. 转到底部的样式并删除topBorderWidth属性

- Abdullah Amir