У меня проблемы с навигатором стека, показывающим заголовок в строке заголовка без его усечения, даже если в заголовке нет других элементов.
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'
}
})
Как вы можете заметить, на вкладке справки нет других кнопок или чего-либо, что могло бы занять место, но заголовок усечен.





Если вы нигде не устанавливаете шрифт, возможно, системный шрифт вашего телефона плохо работает с React Native. Например, я столкнулся с этой проблемой на своем OnePlus 5T, используя шрифт OnePlus Slate.
Измените шрифт своего приложения, чтобы использовать стандартный шрифт, например Roboto для Android и Arial для iOS.
См. Здесь, чтобы узнать больше и как это исправить: https://github.com/react-navigation/react-navigation/issues/5050