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

Question

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

相反，我目前拥有的是没有利润的。

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

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

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-nativemargin

Answer 1

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

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