如何在反应本机间隙 css 中在文本之间添加空格不起作用答案

【问题标题】：How can I add space Inbetween text as in react native gap css is not working如何在反应本机间隙 css 中在文本之间添加空格不起作用
【发布时间】：2022-08-18 22:45:24
【问题描述】：

在这里，我想要 test1 和 test2 之间的空间。

import React from \"react\";
import { StyleSheet, View } from \"react-native\";

function App() {
  const data = [\"test1\", \"test2\", \"test3\"];

  return (
    <View style={styles.app}>
      {data.map((text) => (
        <span style={styles.span}>{text}</span>
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  app: {
    marginTop: 30,
    position: \"absolute\",
    backgroundColor: \"yellow\",
    left: \"8px\",
    widht: \"auto\",
    flexDirection: \"row\",
    alignItems: \"center\",
    justifyContent: \"space-between\"
  },
  span: {
    gap: 20
  }
});

export default App;

但目前它看起来像这样

https://codesandbox.io/s/blissful-sea-tlbjso?file=/src/App.js 我怎样才能通过 css 实现这一点？

更新 - - - - - - - - - - - - - - - - - - - - - - - - - -----

如果我在 span 中添加 marginRight 那么它将在文本末尾添加额外的空间。

标签： javascript css reactjs react-native sass

【解决方案1】：

您需要在类应用程序中的 display: flex 旁边添加 gap 属性。

import React from "react";
import { StyleSheet, View } from "react-native";

function App() {
  const data = ["test1", "test2", "test3"];

  return (
    <View style={styles.app}>
      {data.map((text) => (
        <span>{text}</span>
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  app: {
    marginTop: 30,
    position: "absolute",
    backgroundColor: "yellow",
    left: "8px",
    widht: "auto",
    flexDirection: "row",
    display: "flex",
    gap: 10,
    alignItems: "center",
    justifyContent: "space-between"
  }
});

export default App;

https://codesandbox.io/s/upbeat-chebyshev-22kuqd?file=/src/App.js:0-573

【讨论】：

谢谢@Gelo Chang