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

Question

所以我使用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);

截图： 没有后退按钮，看起来居中:)

现在使用后退按钮，不居中:(

Answer 1

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

// 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