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

Question

I have a react native tab navigation (with material tabs).Inside that tab navigation there are 2 tabs that both do initial data fetch when the tab is activated only once(the first render) and when the data page is changed(infinite scroll).

When first tab is activated and data fetching is in progress, I can't switch to second tab until fetch is over.When i click on the second tab nothing happens but the click is somehow registered, and tab is switched with a delay as soon as the fetch on the previous tab is completed.

My question is, can this tab change be ublocked when fetching data in one of the tabs is in progress.

Here's the code

Initial fetch, the same effect is applied when user scrolls to the bottom to load new data(infinite scroll)

  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])

function that increments page number, that triggers loading new data

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

You can use loading state while fetch is working and disable tab while loading is true (there must be 'disabled' property for Tab component).