Question

所以基本上我正在学习本地反应。我使用的是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>
    )
  }
}

在我的朋友手机上看起来不是这样。我在Android 9上使用了OnePlus6。它们在旧版android上可能会引起某些情况？

Answer 1

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

Answer 2

我在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
   }

Answer 3

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

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

抽屉导航中的代码示例

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

React导航标题标题已切断

3 个答案: