Android 反应导航标题截断

所以基本上我正在学习英语。我正在使用react导航包，我只想在堆栈导航器上显示一个简单的标题，但标题被切断了

这是我的

App.js

从“React”导入React；
从“react native”导入{View，Text}；
从“反应导航”导入{createStackNavigator，createAppContainer}
从“./screens/HomeScreen”导入主屏幕
从“./screens/DetailsScreen”导入DetailsScreen
const RootStack=createStackNavigator(
{
主页：主屏幕，
详情：详情屏幕，
},
{
initialRouteName:“主页”
}
);
const AppContainer=createAppContainer（根堆栈）
导出默认类App扩展React.Component{
render（）{
返回
}
}

这是我的HomeScreen.js

从“React”导入React
从“react native”导入{按钮、视图、文本}
导出默认类主屏幕扩展React.Component{
静态导航选项={
标题:"家",，
}
render（）{
返回(
家庭尖叫
this.props.navigation.navigate（'Details'）}
/>
)
}
}

---

在我朋友的手机上不是这样的。我使用的是一个带android 9的OnePlus 6。他们使用的是较旧版本的android，这可能会导致一些问题吗？

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

我在OnePlus手机上运行了相同的问题，并在没有字体加载程序的情况下解决了此问题，但在headerTitleStyle width中使用了导航选项，如下所示：

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
   }

---

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

解决方案：

width:100%

或一些固定值，如

minWidth:100

抽屉导航中的代码示例

{}
/>

我在OnePlus 5T上也会遇到这种情况，我自己也没有更改字体。将

fontFamily:“roboto”

添加到

headerTitleStyle

可以修复它。