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

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

刷新控件必须分配给内容组件的刷新控件属性。不要将内容置于高层，而是将其移至子组件：

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

确保内容是每个子元素的 base/first 组成部分：

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

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

How to use refresh control inside a native-base tab?

tabs

reactjs

react-native

native-base