react-native 标题随页面滚动显示和隐藏

效果图如下：

代码实现：

import React, {Component} from 'react';
import {
    ScrollView,
    Text,
    View,
    FlatList,
} from 'react-native';

export default class Home extends Component {
   
    state = {
        dataObj: [
            {dat: 123},
            {dat: 123},
            {dat: 123},
            {dat: 123},
            {dat: 123},
            {dat: 123},
            {dat: 123},
            {dat: 123},
            {dat: 123},
            {dat: 123},
        ],
    };

    _onScroll(event) {
        let y = event.nativeEvent.contentOffset.y;
        let opacityPercent = y / 250;
        if (y < 250) {
            this.refs.title.setNativeProps({
                style: {
                    opacity: opacityPercent,
                },
            });
        } else {
            this.refs.title.setNativeProps({
                style: {
                    opacity: 1,
                },
            });
        }
    }

    _keyExtractor = (item, index) => index.toString();

    renderItemView = ({item}) => {
        return <View style={{height: 100}}>
            <Text>{item.dat}</Text>
        </View>;
    };

    render() {
        return (
            <View style={{flex: 1}}>
                <ScrollView
                    scrollEventThrottle={16}
                    onScroll={(event) => this._onScroll(event)}
                    style={{flex: 1}}
                >
                    <View style={{width: '100%', height: 300, backgroundColor: '#8aa5ff'}}/>

                    <FlatList
                        keyExtractor={this._keyExtractor}
                        data={this.state.dataObj}
                        renderItem={this.renderItemView}
                    />
                </ScrollView>
                <View ref='title' style={{
                    height: 50,
                    width: '100%',
                    backgroundColor: '#4aa37c',
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    justifyContent: 'center',
                    alignItems: 'center',
                    opacity: 0,
                }}>
                    <Text style={{color: '#fff', fontSize: 18, fontWeight: 'bold'}}>主&nbsp;页</Text>
                </View>
            </View>
        );
    }
}