ios - 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,
}
});
付款视图
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
}
});
解决方案
经过一番反复试验,我自己弄清楚了。的 Tab.Navigator
类NavigationContainer
有一个名为的道具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
}
});
推荐阅读
- python - 在开发 FastAPI 服务器时,如何像在 jupyter 笔记本中一样检查每个变量?
- python - 使用 Plotly Dash 进行服务器端缓存
- ios - Xcode 13 - “按钮”标题没有消失
- html - 在 mat-table 上应用分页符
- docusignapi - DocuSign API - 通过 API 设置“移动友好”选项
- javascript - 我们可以在apexchart中堆叠范围柱形图吗?
- kivy - 无法更改 kivymd 按钮线颜色
- slurm - 通过 gres 对 SLURM 报告进行排序不起作用
- kdb - 在 kdb+ Q 编程语言中将随机数添加到列表中
- vba - 微软项目 VBA -