Question

在iPhone X和iPhone X Max中，底部导航栏部分埋在屏幕底部。在其他iPhone中都可以。

我使用以下方法创建了导航标签：

https://reactnavigation.org/docs/en/material-bottom-tab-navigator.html

const TabNavigator = createBottomTabNavigator({
  CPM: { screen: App1 },
  CPV: { screen: App2 },
  CPC: { screen: App3 },
},

{tabBarOptions: {
  labelStyle: {
  fontSize: 18,
  fontWeight: 'bold',
  paddingBottom: 6,
  paddingTop: 3,
},
style: {
  backgroundColor: 'lightgrey',
  height: '6%',
  borderTopWidth: 1,
  borderTopColor: 'grey',
},

}
},
);

预期-底部导航栏在整个iOS设备上看起来都一样。实际-在iPhone X和X Max中，导航栏埋在屏幕底部。

Answer 1

我自己找到了答案...

当标签的样式选项与垂直高度混淆时，iPhone X似乎不喜欢它。

我通过注释掉样式部分中的“ height：”属性来解决它。请参阅下面的更新设置：

{tabBarOptions: {
  labelStyle: {
  fontSize: 18,
  fontWeight: 'bold',
  paddingBottom: 6,
  paddingTop: 3,
},
style: {
  backgroundColor: 'lightgrey',
  //height: '6%',
  borderTopWidth: 1,
  borderTopColor: 'grey',
},

}
},

在iPhone X上隐藏了React Native底部选项卡

1 个答案: