ios - 自定义卡片 View 的 Flatlist/SectionList 的实现

Question

我正在尝试实现自定义卡片 View 的列表(就像 ios 中带有自定义 collectionview 单元格的 CollectionView)。我怎样才能实现这个任何想法或教程 plz。我不想使用第三方。有人可以帮帮我吗。

Answer 1

您可以像使用 React Native FlatList 的解决方案一样拥有一个 Collection View 。要制作 GridView ，您必须使用 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
  }
});