自定义卡片视图的Flatlist / SectionList的实现

Question

我正在尝试实现自定义卡片视图的列表（例如具有自定义collectionview单元的ios中的CollectionView）。我怎样才能实现这个任何想法或教程。我不想使用第三方。有人可以帮我吗。

Answer 1

您可以像使用React Native FlatList的解决方案一样拥有一个Collection View。要制作网格视图，您必须使用numColumns属性。以下代码段将为您提供支持。

class MyListItem extends React.PureComponent {

  render() {
    return (
        <View style={styles.item}>
          <Text>
            {this.props.title}
          </Text>
        </View>
    );
  }
}
export default class App extends React.Component {
  data = [
    {
      "id":1,
      "label":"Label 01"
    },
    {
      "id":2,
      "label":"Label 02"
    },
    {
      "id":3,
      "label":"Label 03"
    },
    {
      "id":4,
      "label":"Label 04"
    },
    {
      "id":5,
      "label":"Label 05"
    },
    {
      "id":6,
      "label":"Label 06"
    },
    {
      "id":7,
      "label":"Label 07"
    },
    {
      "id":8,
      "label":"Label 08"
    },
    {
      "id":9,
      "label":"Label 09"
    }
  ]
   _keyExtractor = (item, index) => item.id;

    renderItem = ({item}) => (
    <MyListItem
      id={item.id}
      title={item.label}
    />
  );

  render() {

    return (
      <View style={styles.container}>
        <FlatList
        data={this.data}
        renderItem={this.renderItem}
        keyExtractor={this._keyExtractor}
        numColumns={3}
      />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  item: {
    backgroundColor: '#add8e6',
    alignItems: 'center',
    justifyContent: 'center',    
    flex:1,
    margin: 5,
    height: 100
  }
});

Answer 2

取决于您要执行的操作。 FlatList至少需要以下道具；

• 数据：数据数组。 （每个数据点在列表中为一行）
• renderItem ：如何将数据点转换为一行。 （考虑一下您的渲染功能，但仅此一行。）
• keyExtractor ：如何为这些行创建密钥（将其视为id）以跟踪它们。

最后，您需要执行以下操作（记住数据结构，keyExtractor和呈现的内容是完全任意的）；

  <FlatList
    data={[{ id: 1, text: 'Hello' }, { id: 2, text: 'StackOverflow!' }]}
    keyExtractor={item => `texts#${item.id}`}
    renderItem={({ item }) => (<Text>{item.text}</Text>)}
  />

可以在official React Native documentation上找到关于此的更广泛的数据。