react-native - 下拉屏幕时隐藏和显示组件

Question

我试图在下拉屏幕时显示一个搜索栏，并在向上滚动视图时隐藏它。

下面是我的反应原生代码：

render() {
    return (
        <View style={styles.container}>
            <ScrollView
                style={styles.scrollView}
                onScroll={() => { console.log('onMomentumScrollBegin'); }}
                onScrollBeginDrag={() => { console.log('onScrollBeginDrag'); }}
                onScrollEndDrag={() => { console.log('onScrollEndDrag'); }}
            >
                <SearchBar
                    onChangeText={(obj) => {console.log(obj);}}
                    placeholder='Type Here...'
                    icon={{ type: 'font-awesome', name: 'search' }}
                />
                <View style={styles.innerContainer}>
                    <Text>Hello</Text>
                </View>
                <View style={styles.innerContainer}>
                    <Text>Hello</Text>
                </View>
            </ScrollView>
        </View>
    );
}

如果没有足够的滚动元素，onScroll、onScrollBeginDrag、onScrollEndDrag 不会调用。

这是我的屏幕截图：

如果有人对如何实现它有任何想法，那将非常有帮助。

提前致谢。