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

在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

Answer 2

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

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
  },

Answer 3

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

headerTitleAlign: 'center',

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

文档如下： https://reactnavigation.org/docs/stack-navigator/#headertitlealign

Answer 4

如果左侧具有“后退”按钮且标题居中，则只需在右侧添加一个空白视图即可。

//Install-Package Newtonsoft.Json
using Newtonsoft.Json;
using System.Data;

namespace Split_string_and_assign_as_table
{

    class Program
    {
        static void Main(string[] args)
        {
            string json = @"[
    {
        ""Type"": ""#Microsoft.Azure"",
        ""Email"": ""abc@tmail.com"",
        ""DisplayName"": ""abc"",
        ""Dpt"": ""home""
    },
    {
        ""Type"": ""#Microsoft.Azure"",
        ""Email"": ""xyz@tmail.com"",
        ""DisplayName"": ""xyz"",
        ""Dpt"": ""home""
    }
]";
            var dataTable = JsonConvert.DeserializeObject<DataTable>(json);
        }
    }
}

Answer 5

在 react-navigation v5 中

只需在有后退按钮的屏幕上添加此项即可。

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

当显示后退按钮，React Native Android Specific，React Navigation

5 个答案: