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

【问题标题】：How to have different style for items at certain locations in a list in React Native?如何在 React Native 的列表中为特定位置的项目设置不同的样式？
【发布时间】：2018-03-15 01:13:56
【问题描述】：

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

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

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

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

【问题讨论】：

可以传递每个ListView项的索引吗？如果是这样，您可以使用类似这样的 backgroundColor: (index % 2 == 0) ？ '#ecf0f1' : '#fff'

标签： javascript css reactjs react-native

【解决方案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} />
}

【讨论】：

喜欢这个答案@bennygenel。 RN 新手，从未想过将我的平面列表渲染移出。如果其他人正在尝试这个，如果你控制台值，它有点酷， renderItem = (val) => { console.log(val); }
@bennygenel：是否可以更改特定索引处的单元格大小，或更改第一项的大小？？
如果你想为节列表中每个节的第一个和最后一个项目添加样式，你可以使用renderItem为你提供项目、索引和节数据的事实，所以您可以检查索引是否是特定部分中的最后一个（而不是与整个数据数组进行比较）

【解决方案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 }
        />
      })}
      ...
    </>
  );
}

更具可读性恕我直言。

【讨论】：