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;
        if (y < 250) {
            this.refs.title.setNativeProps({
                style: {
                    opacity: y / 250,
                },
            });
        } else {
            this.refs.title.setNativeProps({
                style: {
                    opacity: 1,
                },
            });
        }
    }

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

    renderItemView = ({item}) => {
        return 
            {item.dat}
        ;
    };

    render() {
        return (
            
                 this._onScroll(event)}
                    style={{flex: 1}}
                >
                    

                    
                
                
                    主 页
                
            
        );
    }
}