react-native - 屏幕在底部材质选项卡栏后面
问题描述
您好正在处理涉及底部标签栏的屏幕。为此,我已经从react-navigation-material-bottom-tabs实现了材料底部标签栏。问题是我的屏幕在底部标签后面,如下所示
黄色边框用于查看 UI 的外观。屏幕的底线预计在底栏上方而不是在其后面。
<SafeAreaView style={{backgroundColor: '#f3f3f5'}}>
<View
style={{
borderWidth: 3,
borderColor: 'yellow',
width: width,
height: height,
flexDirection: 'column-reverse',
}}>
<Header data={headerData} />
<LabelledView
rectanglebarfunc={() => this.rectanglebarfunc()}
height={height * 0.07}
rectanglebarbuttontext={'List Item 01'}
width={width}
color="white"
icolor="#ff007C"
textColr="#120F3F"
fontSize={16}
rectanglebarfunc={() => {}}
/>
<View
style={{
width: '100%',
height: 0.5,
backgroundColor: 'transparent',
}}
/>
<LabelledView
rectanglebarfunc={() => this.rectanglebarfunc()}
height={height * 0.07}
rectanglebarbuttontext={'List Item 00'}
width={width}
color="white"
icolor="#ff007C"
textColr="#120F3F"
fontSize={16}
rectanglebarfunc={() => {}}
/>
{/* <View
style={{
width: '90%',
height: '70%',
backgroundColor: 'red',
alignSelf: 'center',
marginVertical: 5,
}}></View> */}
</View>
</SafeAreaView>
解决方案
尝试将 marginBottom 添加到 safeAreaView 和 View :
<SafeAreaView style={{backgroundColor: '#f3f3f5' ,marginBottom:100}}>
<View
style={{
borderWidth: 3,
borderColor: 'yellow',
width: width,
height: height,
flexDirection: 'column-reverse',
marginBottom:100
}}>
尝试调整您的 marginBottom 以检查希望它有帮助。随时怀疑
推荐阅读
- git - 当由于 git rebase 错误而失败时,如何升级 Oh My Zsh?
- r - 计算r中每列值的出现次数?
- python - BeautifulSoup 返回 None 即使那里有东西
- c++ - 带有powershell命令的Qprocess仍在运行
- magento2 - 如何从 magento 2 中的表 sales_order_item 获取集合数据?
- python - 查找最大长度的子列表给出错误的结果
- for-loop - 为什么正常的 for 循环允许为结构字段赋值而 for range 在 Golang 中不起作用?
- reactjs - onclick 后 react-google-maps 地图刷新
- c - 从一个文件搜索数据并将其写入另一个文件
- asp.net - 无法使用 DownloadProgressChangedEventHandler 更新文本框