Реализация Flatlist / SectionList пользовательских карт

Question

Я пытаюсь реализовать список пользовательских представлений карт (например, CollectionView в ios с настраиваемой ячейкой collectionview).Как я могу достичь этого любой идеи или учебники, плз.Я не хочу использовать третье лицо.Может ли кто-нибудь помочь мне.

Answer 1

Вы можете иметь представление коллекции как решение с React Native FlatList.Чтобы создать вид сетки, вы должны использовать numColumns prop.Следующий сегмент кода поддержит вас.

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 ожидает следующие реквизиты:

• data : массив данных.(Каждая точка данных - это одна строка в вашем списке)
• renderItem : Как преобразовать точку данных в строку.(Подумайте о вашей функции рендеринга, но только для строки.)
• keyExtractor : Как создать ключи (представьте их как идентификаторы) для этих строк, чтобы отслеживать их.

В конце вам нужно будет сделать следующее (имейте в виду, что структура данных, keyExtractor и то, что отображается, совершенно произвольно);

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

Более подробные данные об этом могутможно найти в официальной документации React Native .