如何在React Native的列表中的某些位置使用不同的样式？

Question

我试图为列表中的第一个和最后一个项目设置不同的样式，如下图所示：

第一张卡片右上角有圆角，最后一张卡片右下角有圆角。我还在弄清楚如何解决这个问题。

有没有办法将列表中项目的位置传递给项目本身，以便它可以应用于不同的样式？还是有其他更好的方法？

此外，如果只有一张卡片存在，我希望卡片上下角为圆角，如下所示：

Answer 1

使用ListView / FlatList / SectionList渲染方法渲染项目时具有索引参数。您可以使用该索引来确定该项目是第一个还是最后一个，并为该项目提供条件样式。

示例

renderItem = ({item, index}) => {
  if (index === 0) return <ListItem style={styles.firstItem} data={item} />
  else if (index === (this.state.data.length -1)) return <ListItem style={styles.lastItem} data={item} />
  else return <ListItem style={styles.item} data={item} />
}

render() {
  return <FlatList data={this.state.data} renderItem={this.renderItem} />
}

Answer 2

使用styled-components，您可以执行以下操作：

import styled, { css } from "styled-components";

const Item = styled.div`
  background-color: red;

  ${props => props.isFirst && css`
    background-color: blue;
  `}

  ${props => props.isLast && css`
    background-color: yellow;
  `}
`;

function() {

  const items = [];

  return (
    <>
      ...
      {items.map((item, index) => {
        <Item
          key={item.id}
          isFirst={index === 0}
          isLast={index === items.length - 1 }
        />
      })}
      ...
    </>
  );
}

更具可读性的恕我直言。