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

Question

出于某种奇怪的原因，我无法通过一个按钮使文本在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。如果我在Chrome开发工具中将其更改为display: flex，则它居中。我以为所有项目默认都有display: flex？

Answer 1

您只需删除“ flex：1”

 goButtonText: {
          // flex: 1,
          flexDirection: "row",
          backgroundColor: "blue",
          justifyContent: "center",
          alignItems: "center",
          textAlignVertical: "center",
          textAlign: "center",
          alignSelf: "center",
          alignContent: "center",
        },