Заголовок реакции-навигации усекается

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

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'
  }
})

Вот что я получаю Заголовок реакции-навигации усекается

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

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
861
1

Ответы 1

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

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

См. Здесь, чтобы узнать больше и как это исправить: https://github.com/react-navigation/react-navigation/issues/5050

Другие вопросы по теме