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

必须将刷新控件分配给Content组件的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>
    );
}

确保“内容”是每个子元素的基础/第一部分：

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

如何在本机基选项卡中使用刷新控件？

1 个答案: