React Native 如何给map函数渲染的元素加间距且不影响最后一项？

• 方案1：通过map索引判断动态添加边距
  利用map回调的第二个索引参数，判断当前元素是否为数组最后一项，仅给非最后一项添加右边距即可，修改后的代码如下：

  return (
  <View onLayout={onLayout} style={styles.cardCarouselContainer}>
    <ScrollView horizontal={true} style={styles.scroll} showsHorizontalScrollIndicator={false}>
      {
        props.data.map((perf, index) => (
          <TouchableOpacity 
            // 按需调整间距数值，这里以16为例
            style={{ marginRight: index === props.data.length - 1 ? 0 : 16 }}
            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>
  

• 方案2：使用Flex布局的gap属性（更简洁，推荐RN 0.71+版本使用）
  gap是Flex布局原生支持的间距属性，仅会在相邻子元素之间添加间距，不会在容器首尾边缘产生多余边距，无需做索引判断，修改后的代码如下：

  return (
  <View onLayout={onLayout} style={styles.cardCarouselContainer}>
    <ScrollView 
      horizontal={true} 
      style={styles.scroll} 
      showsHorizontalScrollIndicator={false}
      // 按需调整间距数值，这里以16为例，如果需要滚动容器左右有留白可以再加paddingHorizontal属性
      contentContainerStyle={{ gap: 16 }}
    >
      {
        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>
  

内容的提问来源于stack exchange，提问作者Harry Kim