SafeAreaView не работает с MaterialTopTabNavigator в корне - PullRequest
Новая
       32

SafeAreaView не работает с MaterialTopTabNavigator в корне

2 голосов
/ 15 апреля 2019

Мы используем MaterialTopTabNavigator (https://reactnavigation.org/docs/en/material-top-tab-navigator.html) в корне нашего приложения. Согласно документации по реактивной навигации, к TabNavigator должен быть применен SafeAreaView.

Кажется, что вставка применяется только к верхней части экрана, и в результате (или я могу только предположить), к нижней части не применяется подкладка, которая вызывает телефоны, такие как iPhoneX и другие. устройства большего размера перекрываются.

В соответствии с документацией React-Navigation должна быть конфигурация tabBarOptions, которая позволяет вам переопределить forceInset реквизит SafeAreaView (safeAreaInset). Однако, убедившись, что у нас установлен последний пакет реагирования-навигации, safeAreaInset нигде не найти.

Есть ли способ применить вкладку непосредственно к MaterialTopTabNavigator?

Наш MainNavigator выглядит следующим образом: 

const MainNavigator = createMaterialTopTabNavigator(
  {
    Group: {
      screen: GroupStack,
      navigationOptions: {
        tabBarIcon: () => (
          <Icon name={'group-work'} color={'#FFF'}/>
        ),
      },
    },
    Stats: {
      screen: StatisticsStack,
      navigationOptions: {
        tabBarIcon: () => (
          <Icon name={'insert-chart'} color={'#FFF'}/>
        ),
      },
    },
    GroupRoundsTab: {
      screen: GroupRoundStack,
      navigationOptions: {
        tabBarIcon: () => (
          <Icon name={'group'} color={'#FFF'}/>
        ),
        tabBarLabel: 'Rounds',
      },
    },
    MoreTab: {
      screen: MoreStack,
      navigationOptions: {
        tabBarIcon: () => (
          <Icon name={'more-vert'} color={'#FFF'}/>
        ),
        tabBarLabel: 'More',
      },
    },
  }, {
    tabBarPosition: 'bottom',
    animationEnabled: false,
    swipeEnabled: false,
    lazy: true,
    tabBarOptions: {
      upperCaseLabel: false,
      labelStyle: {
        fontSize: 10,
        margin: 0,
      },
      indicatorStyle: {
        backgroundColor: '#FFF',
      },
      style: {
        backgroundColor: PRIMARY_COLOUR,
      },
      tabStyle: {
        height: 50,
        alignItems: 'center',
        justifyContent: 'center',
      },
      showIcon: true,
    },
  });

Единственное решение, которое мы нашли, - это обернуть все наше приложение в SafeAreaView следующим образом: 

<StatusBar barStyle="dark-content"/>
<SafeAreaView style={{ flex: 1 }}>
    <AppContainer/>
    <OfflineNotice/>
</SafeAreaView>

Огромным недостатком здесь является то, что все StackNavigators в основном TabNavigation получают двойное заполнение, потому что реагирующая навигация автоматически применяет SafeAreaView на этих экранах снова.

Ответы [ 2 ]

1 голос
/ 18 апреля 2019

Я решил не слишком взламывать оригинальный навигатор.Вместо того, чтобы добавить дополнительную сложность, я просто добавил следующие свойства навигации по умолчанию к каждому из StackNavigator маршрутов, чтобы гарантировать, что они не добавят дополнительные отступы в результате визуализации в исходном SafeAreaView.

* 1004.*

Это гарантирует, что все внутренние экраны и внешние экраны будут правильно заполнены.Не идеальное решение, но, по крайней мере, его легко настроить, если необходимо внести изменения по линии.

1 голос
/ 15 апреля 2019

Вы можете добавить оболочку SafeAreaView вокруг верхней вкладки, например: 

import {
  MaterialTopTabBar,
  SafeAreaView,
  createAppContainer,
  createMaterialTopTabNavigator,
} from 'react-navigation';

class MaterialTopTabBarWrapper extends React.Component {
  render() {
    return (
      <SafeAreaView
        style={{ backgroundColor: '#2196f3' }}
        forceInset={{ top: 'always', horizontal: 'never', bottom: 'never' }}>
        <MaterialTopTabBar {...this.props} />
      </SafeAreaView>
    );
  }
}


let Tabs = createMaterialTopTabNavigator(
  {
    /* your routes */
  },
  {
    tabBarComponent: MaterialTopTabBarWrapper,
  }
);
...