Javascript React Native如何在nativebase选项卡中使用FlatList onEndReach保持不间断开火

我不熟悉react native，所以我使用了第三方库中的一些组件，并尽可能使用react native组件

反应本机：0.54 NativeBase:2.3.10

我在scrollView上使用Nativebase的FlatList内部选项卡时遇到问题

onEndReachedThreshold不能正常工作，因为Doc say

0.5

将触发项目的轴向滚动，但当我设置0.5时，它不会触发最后一个项目的轴向滚动，它将等待滚动到最后一个项目并触发onEndReach

如果我使用ListFooterComponent在数据未传递时呈现加载，则onEndReach会出现问题，它会不停地触发onEndReach

这是我的密码

检查道具和初始状态

  static getDerivedStateFromProps(nextProps) {
    const { params } = nextProps.navigation.state;
    const getCategoryId = params ? params.categoryId : 7;
    const getCategoryIndex = params ? params.categoryIndex : 0;
    return {
      categoryId: getCategoryId,
      categoryIndex: getCategoryIndex,
    };
  }
  state = {
    loadCategoryTab: { data: [] },
    loadProduct: {},
    storeExistId: [],
    loading: false,
    refreshing: false,
  }

负荷类别

 componentDidMount() { this.onLoadCategory(); }
  onLoadCategory = () => {
    axios.get(CATEGORY_API)
      .then((res) => {
        this.setState({ loadCategoryTab: res.data }, () => {
          setTimeout(() => { this.tabIndex.goToPage(this.state.categoryIndex); });
        });
      }).catch(error => console.log(error));
  }

当选项卡为swip或单击时，选中onChange事件

  onScrollChange = () => {
    const targetId = this.tabClick.props.id;
    this.setState({ categoryId: targetId });
    if (this.state.storeExistId.indexOf(targetId) === -1) {
      this.loadProductItem(targetId);
    }
  }
  loadProductItem = (id) => {
    axios.get(`${PRODUCT_API}/${id}`)
      .then((res) => {
        /*
        const {
          current_page,
          last_page,
          next_page_url,
        } = res.data;
        */
        this.setState({
          loadProduct: { ...this.state.loadProduct, [id]: res.data },
          storeExistId: this.state.storeExistId.concat(id),
        });
      })
      .catch(error => console.log(error));
  }

触发onEndReach时加载MoreProduct

  loadMoreProductItem = () => {
    const { categoryId } = this.state;
    const product = has.call(this.state.loadProduct, categoryId)
      && this.state.loadProduct[categoryId];
    if (product.current_page !== product.last_page) {
      axios.get(product.next_page_url)
        .then((res) => {
          const {
            data,
            current_page,
            last_page,
            next_page_url,
          } = res.data;
          const loadProduct = { ...this.state.loadProduct };
          loadProduct[categoryId].data = product.data.concat(data);
          loadProduct[categoryId].current_page = current_page;
          loadProduct[categoryId].last_page = last_page;
          loadProduct[categoryId].next_page_url = next_page_url;
          this.setState({ loadProduct, loading: !this.state.loading });
        }).catch(error => console.log(error));
    } else {
      this.setState({ loading: !this.state.loading });
    }
  }

render（）

render（）{
const{loadCategoryTab，loadProduct}=this.state；
const{navigation}=this.props；
返回(
{this.tabIndex=component；}}
//initialPage={categoryIndex}
renderTabBar={（）=>}
onChangeTab={this.onScrollChange}
//tabBarUnderlineStyle={{borderBottomWidth:2}
>
{
loadCategoryTab.data.length>0&&
loadCategoryTab.data.map（（父项）=>{
const{id，name}=parentItem；
const dataItem=has.call（loadProduct，id）？loadProduct[id]。数据：[]；
返回(
{this.tabClick=tabClick；}
标题={name}
tabStyle={style.tabBackground}
activeTabStyle={styles.tabBackground}
textStyle={{color:'#e1e4e8'}}
activeTextStyle={{color:'#fff'}}
>
字符串（子项.prod_id）}
ListMPtyComponent={this.onFirstLoad}
//ListFooterComponent={this.onFooterLoad}
刷新={this.state.refreshing}
onRefresh={this.handleRefresh}
onEndReachedThreshold={0.5}
onEndReached={（）=>{
this.setState（{loading:！this.state.loading}，this.loadMoreProductItem）；
}}
renderItem={（{item}）=>{
const productItems={
项目,，
航行
};
返回(
);
}}
/>
//这个OnLoadFooter是我的临时显示加载，没有ListFooter组件，但我不想在FlatList之外显示加载，希望能尽快得到帮助
);
})
}
);
}

加载元件

function OnLoadFooter(props) {
  if (props.loading) return <Spinner style={{ height: 50, paddingVertical: 10 }} />;
  return null;
}

函数OnLoadFooter（道具）{
如果（道具装载）返回；
返回null；
}

让我解释一下我的过程

• 活动选项卡的初始类别ID和类别索引

• axios fire之后将获取所有类别和呈现选项卡项，因为nativebase Tabs在initailPage大于0时出现错误，显示空白页，我使用ref在类别完成加载时触发它，当this.tabIndex.goToPage为触发器时调用onChange

• onChage事件开始检查单击时保存类别的StoreExistId中是否存在tabClick Ref，如果为true，则加载产品，否则不执行任何操作。我需要ref，因为React状态是异步的，使我的产品第一次加载重复数据，所以ref来解决这个问题

• 当向下滚动到最后一项时，它将通过API上的分页加载MoreProduct

• 我的数据状态如下

  
  StoreExistId:[1,2,3,4]
  装载产品：{
  1:{数据：[……]}，
  2:{数据：[……]}，
  等
  }
  

---

在高级中感谢

一些NativeBase组件在内部使用scrollView。我猜可能是使用ScrollView的ScrollableTab组件？您不应该在ScrollView内部使用FlatList，OnReachen将不起作用。

我也遇到了同样的问题，解决方法是在

内部使用

。有关详细信息，请参见

您可能面临此问题。@akhilxavier我看到有人提到设置固定高度，但我不知道应该在哪里设置，因为我的项目是基于Api中的项目进行渲染的。如果我不使用Flatlist，我可以使用什么来获得滚动？例如，像Twitter应用程序，它在该选项卡下有选项卡和数据，并滚动到底部以加载更多内容数据，有什么帮助吗？

function OnLoadFooter(props) {
  if (props.loading) return <Spinner style={{ height: 50, paddingVertical: 10 }} />;
  return null;
}