文本在React Native中不会垂直居中吗？

出于某些奇怪的原因，我无法在一个按钮中使文本在React Native中垂直居中：

<View style={styles.container}>
  <TouchableOpacity
    style={[styles.button, styles.shareButton]}
  >
    <View style={styles.shareButtonInner}>

      <Text style={[styles.buttonText]}>
        Button which wraps
      </Text>
    </View>
  </TouchableOpacity>

  <TouchableOpacity
    style={[styles.button, styles.goButton]}
  >
    <Text style={[styles.buttonText, styles.goButtonText]}>
      Normal
    </Text>
  </TouchableOpacity>
 </View>

  const paddingVertical = 10;
  const borderRadius = 8;
  const fontSize = 40;

  const styles = StyleSheet.create({
    container: {
      flexDirection: "row",
      padding: 20,
    },
    button: {
      borderRadius,
      overflow: "hidden",
    },
    buttonText: {
      textTransform: "uppercase",
      paddingVertical,
      color: "white",
      paddingHorizontal: 20,
      borderRadius,
      fontSize,
      textAlign: "center",
    },
    goButton: {
      flex: 1,
      backgroundColor: "gold",
      justifyContent: "center",
      alignItems: "center",
      textAlignVertical: "center",
      textAlign: "center",
      alignContent: "center",
    },
    goButtonText: {
      flex: 1,
      flexDirection: "row",
      backgroundColor: "blue",
      justifyContent: "center",
      alignItems: "center",
      textAlignVertical: "center",
      textAlign: "center",
      alignSelf: "center",
      alignContent: "center",
    },
    shareButton: {
      flex: 1,
      marginRight: 10,
    },
    shareButtonInner: {
      display: "flex",
      flex: 1,
      flexDirection: "row",
      backgroundColor: "#281A47",
      justifyContent: "center",
      alignItems: "center",
    },
  });

当使用Expo中的Web视图（引擎盖下的本机Web）时，甚至更奇怪。我可以看到Text元素是display: block。如果我display: flex在Chrome开发者工具中将其更改为，那么它将居中。我以为所有项目display: flex默认都有？