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

Question

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

Answer 1

取决于你想做什么。至少，一个 FlatList 需要以下道具；

data：数据数组。（每个数据点在您的列表中占一行）
renderItem：如何将一个数据点转换成一行。（想想你的渲染函数，但只是一行。）
keyExtractor：如何为这些行创建键（将它们视为 ID）以跟踪它们。

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

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

可以在 official React Native documentation.

找到更多关于此的详细数据

Answer 2

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

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

Implementation of Flatlist/SectionList of Custom Card view's

ios

reactjs

react-native

react-native-ios