存在后退按钮时，标题标题不会保持居中，React Native Android 特定，React Navigation答案

【问题标题】：Header Title does not stay centered when back button is present, React Native Android Specific, React Navigation存在后退按钮时，标题标题不会保持居中，React Native Android 特定，React Navigation
【发布时间】：2019-01-30 17:09:59
【问题描述】：

所以我正在使用React Navigation 3.0 和 React Native。使用标题时，标题标题在 iOS 上默认居中，但在 Android 上左对齐。我使用了一个修复来将 Android 的标题标题居中，这很好。当显示返回按钮时，标题标题会稍微向右推。无论哪种方式，我都希望标题保持居中。

所以我尝试给 HeaderLeftContainerStyle 一个绝对样式，这样它就不会影响标题的位置，但它没有按预期工作。

有什么建议吗？

下面是一些代码的样子：

const MainCommsStack = createStackNavigator(
  {
    ShowMessages: {
      screen: connect(
        mapStateToProps,
        mapDispatchToProps,
      )(MessageScreen),
    },
    ChatWindow: DetailStack,
  },
  {
    defaultNavigationOptions: {
      headerTitle: 'COMMS',
      headerTitleStyle: [
        baseStyles.whiteHeaderText,
        {
          alignSelf: 'center',
          textAlign: 'center',
          justifyContent: 'center',
          flex: 1,
          textAlignVertical: 'center',
        },
      ],
      headerStyle: {
        backgroundColor: colors.vGreen,
      },
      headerBackImage: <BackButton />,
      headerBackTitle: null,
      headerLeftContainerStyle: {
        position: 'absolute',
        left: 10,
      },
      headerLayoutPreset: 'center',
    },
  },
);
const CommsStack = createAppContainer(MainCommsStack);

截图：没有返回按钮，看起来居中:)

现在有返回按钮，不居中:(

【问题讨论】：

您是否尝试过将按钮位置设为绝对位置？
不，但我尝试了不同的解决方案并修复了它。查看我的回答并感谢您的回复：D

标签： android react-native react-navigation

【解决方案1】：

在 React Navigation 使用的 Header.js 文件中，我找到了以下代码行：

// These can be adjusted by using headerTitleContainerStyle on navigationOptions
const TITLE_OFFSET_CENTER_ALIGN = Platform.OS === 'ios' ? 70 : 56;
const TITLE_OFFSET_LEFT_ALIGN = Platform.OS === 'ios' ? 20 : 56;

我将TITLE_OFFSET_LEFT_ALIGN 更改为0 并得到了我想要的。此外，评论提到如果您可以使用headerTitleContainerStyle 来操作它。所以在我的代码中我这样做了：

defaultNavigationOptions: {
      headerTitle: 'COMMS',
      headerTitleStyle: [
        baseStyles.whiteHeaderText,
        {
          flex: 1,
          textAlign: 'center',
        },
      ],
      headerStyle: {
        backgroundColor: colors.vinderGreen,
      },
      headerBackImage: <BackButton />,
      headerBackTitle: null,
      headerTitleContainerStyle: {
        left: 0, // THIS RIGHT HERE
      },
      headerLayoutPreset: 'center',
    },

一切都很好：D

【讨论】：

【解决方案2】：

如果你有左侧的后退按钮和居中的标题，只需在右侧添加一个空视图：

{
  headerTitle: 'COMMS',
  headerRight: <View/>,
}

【讨论】：

【解决方案3】：

以防万一有人需要最新的解决方案。使用此属性：

headerTitleAlign: 'center',

不要将 headerTitleStyle 属性中的文本居中。

这是文档： https://reactnavigation.org/docs/stack-navigator/#headertitlealign

【讨论】：

【解决方案4】：

这是 Dres 解决方案的一种变体。如果您知道内容的尺寸（在我的情况下，我有一张图片）。您可以使用 half 'n half 计算。

const DEVICE_WIDTH = Dimensions.get('screen').width;
const LOGOTYPE_WIDTH = 80;
const TITLE_OFFSET_CENTER_ALIGN = DEVICE_WIDTH / 2 - LOGOTYPE_WIDTH / 2;

然后把偏移量放进去：

 headerTitleContainerStyle: {
    left: TITLE_OFFSET_CENTER_ALIGN, // THIS RIGHT HERE
  },

【讨论】：

【解决方案5】：

在反应导航 v5 中

只需将其添加到具有后退按钮的屏幕上即可。

  useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => <View/>,
    });
  }, [navigation]);

【讨论】：