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 中看到這里的例子嗎，我用文本代替圖標，你的標題居中對齊。 希望能幫助到你。 隨意懷疑