反应本机选项卡导航-阻止更改选项卡，直到获取完成

Question

我有一个本机选项卡导航（带有材质选项卡）。在该选项卡导航中，有两个选项卡，当选项卡仅被激活一次（第一个渲染）和数据页被更改（无限）时，这两个选项卡都进行初始数据获取。滚动）。

当第一个选项卡被激活并且正在进行数据获取时，在获取结束之前，我无法切换到第二个选项卡。当我单击第二个选项卡时，什么也没有发生，但是点击以某种方式被注册，并且选项卡被延迟切换在上一个标签页上的提取完成后。

我的问题是，在其中一个选项卡中进行数据获取时，是否可以取消阻止此选项卡的更改。

这里是代码

初始获取，当用户滚动到底部以加载新数据（无限滚动）时，将应用相同的效果

  useEffect(() => {
        dispatch({ name: 'spinner' });
        fetch(route.params.apiUrl + items.page).then((res) => {
            if (!res.ok) {
                throw new Error('Nije OK Status')
            }
            return res
        }).then((promise) => promise.json()).then((data) => {
            dispatch({ name: 'load', data: data })
        })
    }, [items.page])

增加页码，触发加载新数据的功能

const loadMore = () => {
        dispatch({ name: 'page increment' })
    }

FlatList

 <>
            {items.isLoading ? <View style={styles.indicator}><ActivityIndicator size="large" color={constants.secondary} /></View> : null}
            <FlatList numColumns={1}
                onEndReached={loadMore}
                onEndReachedThreshold={0.5}
                initialNumToRender={10}
                maxToRenderPerBatch={30}
                data={items.data}
                keyExtractor={(item, index) => item.id}
                renderItem={renderItem}
                removeClippedSubviews={true}
                ListHeaderComponent={renderHeader}
            />
        </>

Answer 1

您可以在提取工作时使用加载状态，并在加载为true时禁用Tab（Tab组件必须具有'disabled'属性）。