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

尝试