Как добавить функции в плагин в React Native

Я использую плагин с именем react-native-masonry-list, чтобы показать список данных в виде кладки, который отлично работает. Но когда я пытаюсь обновить значение в данных. Значение обновляется, но не отражается в кладке list.I проверил реквизиты, в которых обновляются данные.

Когда я увидел код в плагине, он упомянул, что только во время изменения изображения/ориентации/размера данные обновляются, а состояние обновляется.

Я хотел бы добавить функцию, например, после изменения данных, она должна обновить список. Но я не знаю, как наследовать плагин, не внося никаких изменений в их код.

Ссылка на плагин: реагировать родной каменной кладки список

<MasonryList
  sorted = {true}
  imageContainerStyle = {styles.masonryImgView}
  onPressImage = {this.onSelectBranchItem}
  renderIndividualHeader = {res => {
    return (
      <DealsMasonryHeader
        data = {res}
        onSelectedDeal = {this.onSelectedDeal}
        onSelectedFavourite = {this.onSelectedFavourite.bind(this, res)}
        favDisable = {res.isfavourite}
        onMapOpen = {this.onMapOpen.bind(this, res)}
        onSocialShare = {this.socialShare.bind(this, res)}
      />
    );
  }}
  renderIndividualFooter = {res => {
    return (
      <DealsMasonryFooter
        data = {res}
        onItemPress = {this.onSelectBranchItem.bind(this, res)}
      />
    );
  }}
  images = {filterData}
/>

Данные фильтра:

const { dealsList, currentUser } = this.props;
const { searchText, selectedBranchItem } = this.state;
let re = new RegExp(searchText, 'i');
const filterData = dealsList
  ? dealsList.filter((deal) => {
    return !!(
      deal.title.match(re) ||
        deal.discount_percentage.toString().match(re) ||
        deal.tags.toString().match(re)
    );
  })
  : [];

Я хочу знать, можно ли наследовать компонент в React Native

В плагине react-native-masonry-list -> MasonryList.js

componentWillReceiveProps = (nextProps) => {
    if (nextProps.layoutDimensions.width && nextProps.layoutDimensions.height &&
        nextProps.layoutDimensions.columnWidth && nextProps.layoutDimensions.gutterSize &&
        nextProps.layoutDimensions.width !== this.props.layoutDimensions.width &&
        nextProps.layoutDimensions.height !== this.props.layoutDimensions.height &&
        !this.props.containerWidth) {
            this.resolveImages(
                nextProps.itemSource,
                nextProps.images,
                nextProps.layoutDimensions,
                nextProps.columns,
                nextProps.sorted
            );
    }
    else if (nextProps.orientation !== this.props.orientation ||
        nextProps.columns !== this.props.columns ||
        nextProps.spacing !== this.props.spacing ||
        nextProps.sorted !== this.props.sorted ||
        nextProps.containerWidth !== this.props.containerWidth) {
            this.resolveImages(
                nextProps.itemSource,
                this._calculatedData,
                nextProps.layoutDimensions,
                nextProps.columns,
                nextProps.sorted
            );
    }
    else if (nextProps.images !== this.props.images) {
        this.resolveImages(
            nextProps.itemSource,
            nextProps.images,
            nextProps.layoutDimensions,
            nextProps.columns,
            nextProps.sorted
        );
    }
}

Как выглядит ваш resolveImages метод? Трудно сказать, что может быть не так, не видя, как вы обновляете свой filterData.

Tholle 25.03.2019 11:25

@Tholle, я не добавил сюда все коды из плагина. Если бы вы могли взглянуть на плагин, было бы проще. В плагине react-native-masonry-list -> MasonryList.js

Nidhin Kumar 25.03.2019 11:28

Да, вам не нужно включать какой-либо библиотечный код, но то, как ты обновляет вашу переменную filterData, очень важно.

Tholle 25.03.2019 11:29

@Tholle, я добавил данные фильтра, не могли бы вы проверить это?

Nidhin Kumar 25.03.2019 11:31
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
4
103
0

Другие вопросы по теме