如何在 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} />
}