React Native 样式中组件之间的空间答案

【问题标题】：Space between components in React Native stylingReact Native 样式中组件之间的空间
【发布时间】：2018-01-12 04:26:47
【问题描述】：

我有 6 个 View 组件（如图所示），我想在所有 6 个 View 组件之间留出空间。

我的代码：

<View style={{flexDirection:'column',flex:6}}>
            <View style={{flex:2,flexDirection:"row",justifyContent:'space-between'}}>
                <View style={{backgroundColor:'red',flex:1}}>
                </View>
                <View style={{backgroundColor:'blue',flex:1}}>
                </View>
            </View>


            <View style={{flex:2,flexDirection:"row",justifyContent:'space-between'}}>
                <View style={{backgroundColor:'white',flex:1}}>
                </View>
                <View style={{backgroundColor:'black',flex:1}}>
                </View>

            </View>

            <View style={{flex:2,flexDirection:"row",justifyContent:'space-between'}}>
                <View style={{backgroundColor:'gray',flex:1}}>
                </View>
                <View style={{backgroundColor:'yellow',flex:1}}>
                </View>

            </View>


 </View>

【问题讨论】：

您是否尝试过简单地将margin: 10 添加到您的内部视图元素中？

标签： reactjs gridview react-native flexbox

【解决方案1】：

<View style={{ flexDirection: "row", flexWrap: "wrap" }}>
          {Array(30)
            .fill({ name: "product name" })
            .map((item, key, arr) => (
              <View
                key={key}
                style={{
                  height: 200,
                  paddingTop: 15,
                  backgroundColor: "skyblue",
                  ...(key % 2 !== 0
                    ? { paddingRight: 15, paddingLeft: 15 }
                    : { paddingLeft: 15 }),
                  flexBasis: "50%",
                }}
              >
                <View
                  style={{
                    flex: 1,
                    backgroundColor: variables?.BackgroundLight,
                  }}
                >
                  <Text style={styles && { ...styles?.text }}>{item.name}</Text>
                </View>
              </View>
            ))}
        </View>

试试这个。您可以使用数组map更好地控制它

【讨论】：

【解决方案2】：

您可以在与子级相同的方向上为父级设置负边距。

const Comp: FC = () => {

  return (
    <View style={styles.container}>
      <View style={styles.item}></View>
      <View style={styles.item}></View>
      <View style={styles.item}></View>
      <View style={styles.item}></View>
    </View>
  )
}

const styles = StyleSheet.create({
  item: {
    // Just for visual representation:
    borderWidth: 2,
    borderColor: '#FF0000',
    height: 100,

    // Important styles:
    marginRight: 15,
    flexBasis: '40%',
    flexGrow: 1,
  },
  container: {
    // Important styles:
    marginRight: -15,
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
});

export default Comp;

【讨论】：

【解决方案3】：

对我来说，among using justify-content: 'space-between' 的解决方案是显式地为父视图指定宽度（在我的例子中，width: '100%'），否则，'space-between' 没有做任何事情。

【讨论】：

【解决方案4】：

然后尝试为元素添加内边距，然后在每一行中添加另一个空白视图，内边距在每个项目之间留出空间

<View style={{
      flexDirection:'column',
      flex:1,
    }}>
        <View style={{flex:2,flexDirection:"row",justifyContent:'space-between',padding:10}}>
            <View style={{backgroundColor:'red',flex:2,padding:10}}>
            </View>
          <View style={{flex:0.1}}/>
            <View style={{backgroundColor:'blue',flex:2,padding:10}}>
            </View>
        </View>

        <View style={{flex:2,flexDirection:"row",justifyContent:'space-between',padding:10}}>
            <View style={{backgroundColor:'white',flex:2,padding:10}}>
            </View>
            <View style={{flex:0.1}}/>
            <View style={{backgroundColor:'black',flex:2,padding:10}}>
            </View>
      </View>
      <View style={{flex:2,flexDirection:"row",justifyContent:'space-between',padding:10}}>
            <View style={{backgroundColor:'gray',flex:1,padding:10}}>
            </View>
            <View style={{flex:0.1}}/>
            <View style={{backgroundColor:'yellow',flex:1,padding:10}}>
            </View>
        </View>

【讨论】：

我想知道是否可以只使用justifyContent 并且没有填充或边距...

【解决方案5】：

如果你使用map函数来渲染你的组件，你可以试试下面的代码：

// Change to the number of columns in your grid
const numCols = 4;

// Change to the spacing for each item
const spacing = '1.25rem';

// Parent View
<View style={{
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
  }}
>
{// List of child views to render
contents.map((content, index) => (
    // add a margin of 'spacing' to the bottom of all cards
    // will supply a left-margin to all cards in between the gap,
    // everytime a card is NOT divisible numCols, add a margin to the left
    <View style={{
      marginBottom : spacing,
      marginLeft: index % numCols !== 0 ? spacing : 0 
    }}
    >
    <Card 
      key={index}
      content={content}
      />
    </View>
  ))
}
</View>

我发现在css网格中使用下面的代码sn-p会产生类似于gap的效果。

【讨论】：

你能不能改变它，让marginBottom在最后一行时也为0？
你能显示完整的代码吗？我不清楚如何确保它获得 4 列，除非您将容器宽度除以 4 并将每张卡片限制在该宽度。您的 numCols 也显示为 4，但图形显示为 3。我喜欢您的解决方案，但我认为它不完整

【解决方案6】：

为父容器（块/视图）赋予以下样式。

  justifyContent: 'space-around'

或

  justifyContent: 'space-between'

Space-around 将在所有元素/视图/项目之间放置空间，并为边框添加空间。与所有元素获得边距相同。并且 space-between 将放置所有项目之间的空间，而不会给边界添加空间所有这些东西都在这里得到了很好的解释。 Here is the link

【讨论】：

但这将证明内容居中。如果您希望这些项目与尾随空格对齐，这是行不通的。

【解决方案7】：

        <View style={{flex:2,flexDirection:"row",flexWrap: 'wrap'}}>
            <View style={{backgroundColor:'white',flex:1,marginHorizontal:5,marginVertical:10,}}>
            </View>
            <View style={{backgroundColor:'black',flex:1,marginHorizontal:5,marginVertical:10,}}>
            </View>

        </View>

        <View style={{flex:2,flexDirection:"row",flexWrap: 'wrap'}}>
            <View style={{backgroundColor:'gray',flex:1,marginHorizontal:5,marginVertical:10,}}>
            </View>
            <View style={{backgroundColor:'yellow',flex:1,marginHorizontal:5,marginVertical:10,}}>
            </View>

        </View>

【讨论】：

请解释一下。
你需要参考这个链接facebook.github.io/react-native/docs/layout-props

【解决方案8】：

您可以在样式中添加以下内容：

attachcontainer{
   flexDirection:  'row',
   justifyContent: 'space-between'
}

【讨论】：

请正确格式化您的代码并提供一些解释。

【解决方案9】：

在这种情况下，您有 2 个解决方案

首先，使用边距/填充在弹性元素之间制造空气

另一种方法是将 justifyContent 设置为 'space-between' || '空间环绕'

但您必须了解一些信息才能在不同情况下使用最佳解决方案

1-（边距填充）

在某些情况下（更多情况），填充更好的边距

如你所知，如果我们有一个盒子（意味着元素），你有两个空格，

首先在内容和边框之间[内部空间]

第二，边框与另一个外框元素之间的空间[外层空间]

如果你有一个元素并且你想在你的样式中移动元素，你必须使用边距，因为如果你为你的元素使用填充，内部空间会改变，并且在很多情况下，这种方法会在你的元素中造成一些崩溃， {{如果你想使用填充，你必须创建一个视图并包装你的所有元素并为你设置一个包装器的填充}}

如果你想使用空格 ||空间周围，你必须知道这一点， space-between 和 space-around 有一个区别

在空间之间，元素之间产生的空间，而不是在你的元素之间创造空间与边

和空间环绕设置空间与元素和边

【讨论】：

【解决方案10】：

您可以简单地为元素添加边距，它会正常工作。

<View style={{flexDirection:'column',flex:6}}>
  <View style={{flex:2,flexDirection:"row",justifyContent:'space-between', marginBottom: 10}}>
    <View style={{backgroundColor:'red',flex:1, marginRight: 5}}>
    </View>
    <View style={{backgroundColor:'blue',flex:1, marginLeft: 5}}>
    </View>
  </View>


  <View style={{flex:2,flexDirection:"row",justifyContent:'space-between', marginBottom: 10}}>
    <View style={{backgroundColor:'white',flex:1, marginRight: 5}}>
    </View>
    <View style={{backgroundColor:'black',flex:1, marginLeft: 5}}>
    </View>
  </View>

  <View style={{flex:2,flexDirection:"row",justifyContent:'space-between', marginBottom: 10}}>
    <View style={{backgroundColor:'gray',flex:1, marginRight: 5}}>
    </View>
    <View style={{backgroundColor:'yellow',flex:1, marginLeft: 5}}>
    </View>
  </View>
</View>

【讨论】：