如何在 React Native 的列表中为特定位置的项目设置不同的样式？

Question

我正在尝试为列表中的第一项和最后一项使用不同的 styles，如下图所示：

第一张牌在右上角有圆角，最后一张牌在右下角有圆角。 我仍在想办法解决这个问题。

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

另外，如果只有一张卡片，我希望卡片的右上角和右下角都圆润，如下所示：

Answer 1

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

示例

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 }
        />
      })}
      ...
    </>
  );
}

更易读恕我直言。

Answer 3

添加到@bennygenel 的答案，我们也可以使用三元运算符

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

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