название реагирующей навигации усекается

Question

У меня проблемы со стека-навигатором, показывающим заголовок в строке заголовка без его усечения, даже если в заголовке нет других элементов.

const Tabs = createBottomTabNavigator({
  Home,
  Bookings,
  UserCenter,
  Help,
  WhatsApp
}, {
  tabBarOptions: {
    activeTintColor: 'tomato',
    inactiveTintColor: 'gray',
  },
  tabBarPosition: 'bottom',
  animationEnabled: false,
  swipeEnabled: false,
  navigationOptions: {
    tabBarOnPress: ({navigation, defaultHandler}) => {
      if (navigation.state.routeName === 'WhatsApp') {
        Linking.openURL('whatsapp://send?phone=982')
        defaultHandler = () => {}
      } else {
        defaultHandler()
      }
    }
  }
});

Tabs.navigationOptions = ({ navigation }) => {
  const { routeName } = navigation.state.routes[navigation.state.index];

  // You can do whatever you like here to pick the title based on the route name
  const options = {
    headerTitle: routeName
  }

  if (routeName === 'Home') {
    options.header = null
  }

  return options
};

const App = createStackNavigator({
  Tabs,
  Wallet,
  HelpQuestion,
  Service,
  Category,
  BookNow,
  Favorites,
  BookingSummary,
  Referral,
  Search
}, {
  navigationOptions: {
    headerTintColor: '#000'
  }
})

Вот что я получаю

Как вы можете заметить, на вкладке справки нет других кнопок или чего-либо, что могло бы занять место, но заголовок все же усечен

Answer 1

Если вы нигде не устанавливаете шрифт, возможно, системный шрифт вашего телефона плохо воспроизводится с React Native.Например, я столкнулся с этой проблемой на своем OnePlus 5T, используя шрифт OnePlus Slate.

Измените шрифт вашего приложения, чтобы использовать стандартный шрифт, такой как Roboto для Android и Arial для iOS.

Смотрите здесь для получения дополнительной информации и как это исправить: https://github.com/react-navigation/react-navigation/issues/5050