1

我正在使用 react native(0.61) 在主屏幕上构建一个带有滚动视图的应用程序。我必须实现带有自动隐藏的标题栏，并且需要添加刷新和无限滚动（如 Facebook 时间轴）。所以我用 React 原生动画实现了自动隐藏标题。现在我无法识别刷新和滚动到底部手势。

现在我需要在同一个屏幕上实现刷新、自动隐藏标题和无限滚动。（我已经添加了我尝试过的内容）

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>

        );
    }
}
4

0 回答 0