Реагируйте на встроенный вид прокрутки привязки для автоматического скрытия заголовка с refreshcontroll и бесконечной загрузкой - PullRequest
Новая
       74

Реагируйте на встроенный вид прокрутки привязки для автоматического скрытия заголовка с refreshcontroll и бесконечной загрузкой

0 голосов
/ 19 апреля 2020

Я использую реагировать нативно (0,61), чтобы создать приложение с прокруткой на главном экране. Я должен реализовать панель заголовка с автоматическим скрытием и нужно добавить refre sh и бесконечную прокрутку (как на временной шкале Facebook). поэтому я реализовал автоматическое скрытие заголовка с помощью встроенной анимации React. теперь я не могу определить refre sh и прокрутить до нижних жестов.

Теперь мне нужно реализовать refre sh, заголовок с автоматическим скрытием и бесконечную прокрутку на одном экране. (я добавил то, что попробовал) 

const HEADER_HEIGHT = 120;

class HomeScreen extends Component {
    constructor(props) {
        super(props);
        this.scrollY = new Animated.Value(0);
        this.diffClamp = Animated.diffClamp(this.scrollY,0,HEADER_HEIGHT);
        this.headerY = this.diffClamp.interpolate({
            inputRange: [0, HEADER_HEIGHT],
            outputRange: [0, -HEADER_HEIGHT],
        });
    }

    onScroll(nativeEvent){
        if (this.isCloseToBottom(nativeEvent)) {
            this.loadMoreData();
        }
    }

    isCloseToBottom({layoutMeasurement, contentOffset, contentSize}) {
        const paddingToBottom = 100;
        return layoutMeasurement.height + contentOffset.y >= contentSize.height - paddingToBottom;
    }

    render(): * {

        return (
            <View>
                <Animated.View style={{
                    position: 'absolute',
                    width: '100%',
                    top: 0,
                    left: 0,
                    backgroundColor: '#8c8c8c',
                    height: HEADER_HEIGHT,
                    transform:[
                        {
                            translateY:this.headerY
                        }
                    ]
                }}>
                    <Text>Hiii ALL</Text>
                </Animated.View>
                <Animated.ScrollView
                    scrollEventThrottle={16}

                    //I have to use this due to Header disappear when user scroll down to refresh
                    bounces={false}

                    //i used this previously to mange refresh. its not working because bounces={false}  
                    refreshControl={<RefreshControl refreshing={this.props.refreshing} onRefresh={() => this.onRefresh()}/>}

                    //in previous for infinte scroll 
                    onScroll={({nativeEvent}) => this.onScroll(nativeEvent)}

                    //now need to add this way to manage Auto Hide navbar 
                    onScroll={Animated.event(
                        [{
                            nativeEvent: {
                                contentOffset: {
                                    y: this.scrollY,
                                },
                            },
                        }],
                    )}

                    //I tried this but it does not working at all
                    onScroll={(e)=>{
                        Animated.event(
                            [{
                                nativeEvent: {
                                    contentOffset: {
                                        y: this.scrollY,
                                    },
                                },
                            }],
                        );
                        this.onScroll(e)
                    }}



                >

                    //content
                </Animated.ScrollView>
            </View>

        );
    }
}
...