React-Navigation: выравнивание заголовка по центру

Question

У меня проблемы с выравниванием моего пользовательского заголовка по центру заголовка в Stack Navigation.

Это мой текущий вид:

Мне бы хотелось, чтобы значок меню находился слева, а заголовок центрировался.

Мой текущий код для screenOptions в StackNavigator :

  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

Вы можете увидеть пример здесь в этой expo-snack , там вместо иконки я использовал текст, а ваш заголовок выровнен по центру. Надеюсь, поможет. не стесняйтесь сомнений

Answer 2

Вы пытались использовать опцию headerTitleAlign в screenOptions?

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 3

try

textAlign:'center' 

в стилях заголовка заголовка