Как использовать управление обновлением на вкладке родной базы? - PullRequest
Новая
       39

Как использовать управление обновлением на вкладке родной базы?

0 голосов
/ 01 ноября 2018

У меня есть вкладка родной базы со списком внутри, в которой я хочу использовать 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>
        );
    }

Дайте мне знать, если вам нужна дополнительная информация, я только что включил код, который я считаю уместным. Спасибо за любую помощь!

1 Ответ

0 голосов
/ 27 июня 2019

Элемент управления обновлением должен быть назначен свойству refreshControl компонента Content. Вместо того, чтобы иметь содержимое на высоком уровне, переместите его в дочерние компоненты: 

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 для обновления не работает с макетом Tab

...