反应本机选项卡导航 - 在获取完成之前阻止选项卡更改

Question

我有一个反应本机标签导航（带有材料选项卡）。隐藏标签导航有2个选项卡，只有在才能激活一次（第一个渲染）和更改数据页面时，都会初始数据获取无限滚动）。

当第一个选项卡被激活并且数据获取正在进行时，我无法切换到第二个选项卡，直到获取结束。当我单击第二个选项卡时没有任何反应，但单击以某种方式注册，并且选项卡切换为上一个选项卡上的提取完成后立即延迟。

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

这是代码

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

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

平面列表

 <>
            {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

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