React-Navigation：将标题与中心对齐

Question

我无法将自定义标题与堆栈导航中的标题中间对齐。

这是我目前的看法：

我想让菜单图标在左边，标题居中。

我在StackNavigator中screenOptions 的当前代码是

  headerStyle: {
    backgroundColor: "#a5ade8",
    height: 80
  },
  headerTintColor: "#383f42",
  headerTitleStyle: {
    fontFamily: "heebo-black",
    fontSize: 24
  }

我的自定义标头中的代码是：

return (
    <View style={styles.container}>
      <MaterialIcons
        name="menu"
        style={styles.icon}
        size={24}
        onPress={openDrawer}
      />
      <View>
        <Text style={styles.headerTitle}>{title}</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex:1,
    height: "100%",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",

  },
  headerTitle: {
    fontFamily: "heebo-black",
    fontSize: 24,
    color: "#383f42",
    letterSpacing: 1,
  },
  icon: {
    position: "absolute",
    left: 16
  }
});

我在标题中将宽度设置为 100%，但是它只占用文本的空间......

任何帮助将不胜感激！

Answer 1

您是否尝试过在screenOptions使用headerTitleAlign选项？

const HomeStackNavigator = () => {
  return (
    <Stack.Navigator
      initialRouteName="Reviews"
      screenOptions={{
        headerTitleAlign: "center"
      }}
    >
      <Stack.Screen
        name="Reviews"
        component={Home}
        options={{
          headerTitle: () => (
            <View style={styles.container}>
              <View>
                <Text style={styles.headerTitle}>Reviews App</Text>
              </View>
            </View>
          ),
          headerLeft: () => (
            <MaterialIcons name="menu" size={35} style={styles.icon} />
          )
        }}
      />
    </Stack.Navigator>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    height: "100%",
    flexDirection: "row",
    alignItems: "center"
  },
  headerTitle: {
    fontSize: 24,
    color: "#383f42",
    letterSpacing: 1
  },
  icon: {
    marginLeft: 10
  }
});

Answer 2

尝试

textAlign:'center' 

在标题标题样式

Answer 3

你能在这个expo-snack 中看到这里的例子吗，我用文本代替图标，你的标题居中对齐。 希望能帮助到你。 随意怀疑