React Native）如何在映射函数中包装的元素之间添加边距？

Question

我正在尝试在地图函数中包装的卡片元素之间放置边距。我想要做的就像下面的link：

相反，我现在的是无保证金。

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

在此先感谢，这是我的代码：

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>

);

Answer 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>
  ))

React Native）如何在映射函数中包装的元素之间添加边距？

React Native) How can I add a margin between elements that are wrapped in a map function?

react-native

margin