反应导航标题被截断

Question

即使标题上没有其他元素，我也难以用stacknavigator在标题栏上显示标题而不将其截断。

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 Slate字体的OnePlus 5T上遇到了这个问题。

更改应用程序的字体以使用标准字体，例如Android的Roboto和iOS的Arial。

有关更多信息及其解决方法，请参见此处：https://github.com/react-navigation/react-navigation/issues/5050