android - react 导航标题标题被切断

Question

所以基本上我正在学习 React Native。我正在使用 react 导航包，我只想在我的堆栈导航器上显示一个简单的标题标题，但标题被切断了。 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>
    )
  }
}

在我 friend 的手机上看起来不是这样的。我正在使用装有 Android 9 的 OnePlus 6。它们使用的是较旧版本的 Android，这会导致什么问题吗？

Answer 1

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