Нижняя вкладка React Native скрыта на iPhone X - PullRequest
Новая
       27

Нижняя вкладка React Native скрыта на iPhone X

0 голосов
/ 26 мая 2019

Нижняя панель навигации частично скрыта в нижней части экрана в iPhone X и iPhone X Max. В других айфонах все нормально.

Я создал вкладку навигации, используя этот метод:

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 панель навигации скрыта внизу экрана.

1 Ответ

0 голосов
/ 26 мая 2019

Похоже, что iPhone X не нравится, когда на вкладке есть опции стилей, которые портятся по вертикали.

Я решил это, закомментировав атрибут "height:" в разделе стилей. Смотрите ниже обновленные настройки: 

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

}
},
...