reactjs - 如何在 native 基础选项卡中使用刷新控件？

Question

我有一个本地基础选项卡，其中有一个列表，我想在其中使用 RefreshControl 在下拉时刷新列表，但我无法让它正常工作。我已经在其他几个地方实现了 RefreshControl，但它只是不会在我的选项卡内运行。 这是选项卡所在的代码。仅当我将其放入此处的内容标记中时，如果我尝试将其包含在选项卡中或被调用的组件内，则它才有效，当您下拉时不会发生任何情况。

render() {
    const { navigation } = this.props;
    return (
            <Container>
                <Content >
                    <Tabs locked= {true}>
                        <Tab heading="Active" >
                                <PharmacyActiveView screenProps={this.state.username} nav={navigation}/>
                        </Tab>
                        <Tab heading="Expired">
                               <PharmacyExpiredView screenProps={this.state.username} nav={navigation}/>
                        </Tab>
                    </Tabs>
                </Content>
            </Container>
    );
}

这是 PharmacyActiveView 代码。我尝试在此处包含刷新控件，但无论如何 onRefresh 方法都不会被命中。

onRefresh() {
        this.setState(() => { return { pageNumber: 1, refreshing: true } }, () => {
            this.getActivePharmacyPrescriptions(this.state.pageNumber, global.defaultValues.pageSize, false);
        });
    }

render() {
        const footerStyle = this.state.metaData == undefined ? null : (this.state.metaData.HasNextPage ? style.footerViewActive : style.footerViewInactive);
        return (
            <View refreshControl={
                <RefreshControl
                    onRefresh={this.onRefresh.bind(this)}
                    refreshing={this.state.refreshing}
                    colors={[sharedStyle.mainColor]} //android
                    tintColor={sharedStyle.mainColor} //ios
                    progressBackgroundColor={'#fff'}
                />
            }>
                <FlatList
                    style={style.pharmacyFlatList}
                    data={this.state.data}
                    renderItem={this._renderItem}
                    keyExtractor={(x, i) => i}
                    extraData={this.state}
                />
            </View>
        );
    }

如果您需要更多信息，请告诉我，我刚刚包含了我认为相关的代码。感谢您的帮助!

Answer 1

刷新控件必须分配给内容组件的refreshControl 属性。不要将内容放在高层，而是将其移动到子组件:

render() {
    const { navigation } = this.props;
    return (
        <Container>
            <Tabs locked= {true}>
                <Tab heading="Active" >
                    <PharmacyActiveView screenProps={this.state.username} nav={navigation}/>
                </Tab>
                <Tab heading="Expired">
                    <PharmacyExpiredView screenProps={this.state.username} nav={navigation}/>
                </Tab>
            </Tabs>
        </Container>
    );
}

确保 Content 是每个子元素的基础/第一个组件:

onRefresh() {
    this.setState(() => { return { pageNumber: 1, refreshing: true } }, () => {
        this.getActivePharmacyPrescriptions(this.state.pageNumber, global.defaultValues.pageSize, false);
    });
}

render() {
    const footerStyle = this.state.metaData == undefined ? null : (this.state.metaData.HasNextPage ? style.footerViewActive : style.footerViewInactive);
    return (
        <Content refreshControl={
            <RefreshControl
                onRefresh={this.onRefresh.bind(this)}
                refreshing={this.state.refreshing}
                colors={[sharedStyle.mainColor]} //android
                tintColor={sharedStyle.mainColor} //ios
                progressBackgroundColor={'#fff'}
            />
        }>
            <FlatList
                style={style.pharmacyFlatList}
                data={this.state.data}
                renderItem={this._renderItem}
                keyExtractor={(x, i) => i}
                extraData={this.state}
            />
        </Content>
    );
}

更多详情请访问:
Native Base - Pull to refresh is not working with Tab layout