反应导航标题标题被切断答案

【问题标题】：React navigation header title cut off反应导航标题标题被切断
【发布时间】：2019-04-24 12:34:44
【问题描述】：

所以基本上我正在学习 React Native。我正在使用反应导航包，我只想在我的堆栈导航器上显示一个简单的标题标题，但标题被切断了。 Stack nav title

这是我的App.js

import React from 'react';
import { View, Text } from 'react-native';
import { createStackNavigator, createAppContainer} from 'react-navigation'
import HomeScreen from './screens/HomeScreen'
import DetailsScreen from './screens/DetailsScreen'

const RootStack = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Home'
  }
);

const AppContainer = createAppContainer(RootStack)

export default class App extends React.Component {
  render(){
    return<AppContainer />
  }
}

这是我的 HomeScreen.js

import React from 'react'
import {Button, View, Text } from 'react-native'

export default class HomeScreen extends React.Component {

  static navigationOptions = {
      title: 'Home',
  }

  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screeeen</Text>
        <Button
          title="Go to Details"
          onPress={() => this.props.navigation.navigate('Details')}
        />
      </View>
    )
  }
}

在我朋友的手机上看起来不像这样。我正在使用带有 android 9 的 OnePlus 6。它们在旧版本的 android 上可能会导致某些问题吗？

【问题讨论】：

标签： android react-native react-native-android react-navigation stack-navigator

【解决方案1】：

事实证明，这是一个影响选择使用字体 OnePlus Slate 而不是例如机器人的 OnePlus 用户的特定问题。更改手机中的字体可以解决问题，或者您在应用程序中强制使用字体，它应该也可以工作

【讨论】：

这也发生在我的 OnePlus 5T 上，我自己没有更改字体。将fontFamily: 'roboto' 添加到headerTitleStyle 可以修复它。

【解决方案2】：

我在 OnePlus 手机上运行时遇到了同样的问题，并在没有字体加载器的情况下解决了它，但使用 headerTitleStyle 宽度中的导航选项设置样式，如下所示：

import { Dimensions } from 'react-native';
const WIDTH = Dimensions.get('window').width;



export const MyStackNav = createStackNavigator(
  {
    Tab1: {
      screen: Tab1,
      navigationOptions: ({ navigation }) => ({
        headerTitle: `${navigation.state.routeName} page`,
        headerTitleStyle: {
          width: WIDTH - 75,
        },
      }),
    },
    ...more code
   }

【讨论】：

【解决方案3】：

类似的问题也出现在各种组件中，例如一加设备中的按钮。一种解决方法是为标签样式提供一些最小宽度，这样您就不必切换字体系列，如果您使用一些自定义字体会有所帮助

解决方案：width: '100%' 或一些固定值，例如 minWidth: 100

抽屉导航中的代码示例

<DrawerItem
    labelStyle={{ minWidth: 100 }}
    label={`Orders`}
    onPress={() => {}}
 />

【讨论】：