小编pgr*_*931的帖子

react-native中BottomTabNavigator上方的白线

我刚开始用 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,
    }
});
Run Code Online (Sandbox Code Playgroud)

付款视图

export default class PaymentScreen extends Component{ …
Run Code Online (Sandbox Code Playgroud)

ios react-native

6
推荐指数
1
解决办法
2463
查看次数

标签 统计

ios ×1

react-native ×1