Прокрутка FlatList со статическим компонентом

У меня есть один статический компонент и множество компонентов, отрисованных в цикле, на экране.

Весь код ниже здесь.

import React from "react";
import { View, Text, FlatList } from "react-native";
...

class FlatListScrollWithStatic extends React.Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <FriendsTop />  // the static component
        <FlatList
          style={{ flex: 1 }}
          data={this.props.friendsCard}
          renderItem={({ item }) => <FriendsCard {...item} />}  // the for loop rendered components
          keyExtractor={(item, index) => index.toString()}
        />
      </View>
    );
  }
}

Теперь я хочу перенести FriendsTop в Flatlist, позволить ему прокручиваться вместе с визуализированными компонентами, как мне изменить свой код?


react-native javascript react-native-flatlist
person ccd    schedule 19.12.2018    source источник

Ответы (3)


arrow_upward
4
arrow_downward

Flatlist имеет свойство ListHeaderComponent, которое принимает элемент JSX. Так:

import React from "react";
import { View, Text, FlatList } from "react-native";
...

class FlatListScrollWithStatic extends React.Component {
  render() {
    return (
      <View style={{ flex: 1 }}>

        <FlatList
          style={{ flex: 1 }}
          data={this.props.friendsCard}
          renderItem={({ item }) => <FriendsCard {...item} />}  // the for loop rendered components
          keyExtractor={(item, index) => index.toString()}
          ListHeaderComponent={<FriendsTop />}
        />
      </View>
    );
  }
}
person Milore    schedule 19.12.2018
comment
О да, я забыл, что в плоском списке с поддержкой react-native доступно больше свойств по сравнению с версией с простой реакцией, которую я использую. Хороший звонок. - person Drew Reese; 19.12.2018
comment
Ваше решение тоже работает, но я думаю, что это чище. - person Milore; 19.12.2018
comment
О, конечно. Я в основном занимался разработкой реагирования, поэтому мне пришлось создать свой собственный плоский список на основе FlatList от RN с минимальным набором свойств, чтобы остальная часть моей команды приняла его с большей охотой. - person Drew Reese; 19.12.2018

arrow_upward
2
arrow_downward

Это может сработать для вас:

import React, { Fragment } from "react";

...

<FlatList
  style={{ flex: 1 }}
  data={this.props.friendsCard}
  renderItem={({ item }, index) => (
    <Fragment>
      { !index && <FriendsTop /> } // Render when !index is truthy (i.e. index === 0)
      <FriendsCard {...item} />
    </Fragment>
  )}
  keyExtractor={(item, index) => index.toString()}
/>
person Drew Reese    schedule 19.12.2018
comment
Это позволяет FriendsTop прокручивать, но также отображает FriendsTop одновременно с FriendsCard. - person ccd; 19.12.2018
comment
Да, только в первом элементе (индекс === 0) он отображает в списке компонент FriendsTop перед первым элементом. Он прокрутит весь список. - person Drew Reese; 19.12.2018

arrow_upward
0
arrow_downward

Я думаю, что есть два способа сделать это сначала, используя первый, используя компонент заголовка плоского списка

но я думаю, если вам нужны статические данные с данными, которые вы получаете из выборки, вы должны объединить их

 <FlatList
   inverted
      data={this.state.data.concat({
        "id":1,
        "user_id": 1,
        "title": "all",
        "similar_title": null,
        "description": null,
        "font_icon": null,
        "default_distance": 8,
        "visible": "yes",
        "priority": "no",
        "image": null,
        "created_at": null,
        "updated_at": "2018-06-14 22:13:58"
    })}

      numColumns={4}


      renderItem={({item}) =>

в этом коде я добавляю кнопку static all с помощью concat изображение

person Roozbeh Mohammadzadeh    schedule 19.12.2018