React Native）如何在地图函数中包装的元素之间添加边距？答案

【问题标题】：React Native) How can I add a margin between elements that are wrapped in a map function?React Native）如何在地图函数中包装的元素之间添加边距？
【发布时间】：2021-11-01 13:24:04
【问题描述】：

我试图在包含在地图函数中的卡片元素之间放置一个边距。我想做的就像下面的链接：

相反，我目前拥有的是没有边距。

如果我只是简单地为每张卡片设置右边距，我就无法避免超出最后一张卡片。我只想在地图函数的元素之间插入边距。有没有办法让这成为可能？

提前致谢，这是我的代码：

return (
<View onLayout={onLayout} style={styles.cardCarouselContainer}>
  <ScrollView horizontal={true} style={styles.scroll} showsHorizontalScrollIndicator={false}>
    {
      props.data.map(perf => (
        <TouchableOpacity onPress={() => {
          dispatch(selectTicker(perf.symbol));
          stackNavigation.navigate('Details', { companyName: findTranslation(perf.symbol), stockName: perf.symbol });
        }}>
          <Card key = {perf.symbol} symbol = {perf.symbol} close = {perf.close} changePercent = {perf.changePercent}/>
        </TouchableOpacity>
      ))

    }
  </ScrollView>
</View>

);

【问题讨论】：

标签： react-native margin

【解决方案1】：

您可以通过将数组长度与当前索引进行比较，有条件地在地图函数中添加所需的边距。

props.data.map((perf, index, arr) => (
    <TouchableOpacity onPress={() => {
      dispatch(selectTicker(perf.symbol));
      stackNavigation.navigate('Details', { companyName: findTranslation(perf.symbol), stockName: perf.symbol });
    }}>
      <Card key = {perf.symbol} symbol = {perf.symbol} close = {perf.close} changePercent = {perf.changePercent} style={arr.length !== index + 1 ? styles.styleWithMargin : styles.styleWithoutMargin}/>
    </TouchableOpacity>
  ))

【讨论】：