时间戳

首页 > 解决方案 > 如何在来自映射函数的组件之间添加空间？

react-native - 如何在来自映射函数的组件之间添加空间？

问题描述

我正在尝试添加一些按钮，其标题位于数组的每个位置内（例如，第一个按钮的标题在位置 0 的数组内容中），这就是我使用地图功能和它可以工作，但是......我不能在每个按钮之间添加空格

它看起来像这样： 在此处输入图像描述 这是调用映射函数的地方：

<ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
  <View style={{
       flexDirection: 'row',
       justifyContent: 'space-between'}}>
    {mapping()}
  </View>
</ScrollView>

这是功能：

function mapping() {
  const horas = ["6:30-7:30", "7:30-8:30", "7:30-8:30"...]
  const mappeo = horas.map((i) => {
    return (
        <Button
            title={i}
            type="outline"
            style={{ padding:10}}/>
          )
  }
  )
  return (mappeo)
}

那么如何分离按钮呢？

标签： react-native

解决方案

如何使用保证金。填充用于容器内的内容，边距用于在容器外应用边距或空间。

尝试这个

function mapping() {
  const horas = ["6:30-7:30", "7:30-8:30", "7:30-8:30"...]
  const mappeo = horas.map((i) => {
    return (
        <Button
            title={i}
            type="outline"
            style={{ padding:10, marginHorizontal:10}}/>
          )
  }
  )
  return (mappeo)
}

推荐阅读