Question

我正在使用一个名为react-native-masonry-list的插件在砌体视图中显示数据列表，效果很好。但是当我尝试更新数据中的值时，该值会更新但不会反映出来在砌体清单中。我检查了更新数据的道具。

当我看到插件中的代码时，它提到只有在图像/方向/大小改变时，数据才会刷新，状态也会更新。

我想添加一个函数，例如一旦数据更改，它应该刷新列表。但是我不知道如何在不更改其代码的情况下继承该插件。

<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}
/>

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
        );
    }
}

如何在React Native中向插件添加功能

0 个答案: