React 导航 header 标题被截断

Question

所以基本上我正在学习 React Native。我正在使用反应导航包，我只想在我的堆栈导航器上显示一个简单的 header 标题，但标题被切断了。 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 这会导致什么问题吗？

Answer 1

原来这是一个影响 OnePlus 用户的特定问题，他们选择使用字体 OnePlus Slate 而不是 exmaple 机器人。更改 phone 中的字体可以解决问题，或者您在应用程序中强制使用字体，它应该也能正常工作

Answer 2

我在 OnePlus phone 上遇到了同样的问题运行并在没有字体加载器的情况下解决了它，但是在 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
   }

Answer 3

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

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

抽屉导航中的代码示例

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

React 导航 header 标题被截断

React navigation header title cut off

android

react-native

react-native-android

react-navigation

stack-navigator