React-Native动态标题栏（仿微信）

项目需要写了一个动态的标题栏。原来是没有一点想法的。后来想到了。
方法不难。就是在ScrollView向上滑动时，会掉用onScroll方法。在onScrollView方法中根据滑动的偏移量，而后修改state。从而实现动态效果。
先看看效果。

test.gif

核心代码

onScroll(evt){
        let y = evt.nativeEvent.contentOffset.y;
        // 隐藏返回按键和照相机
        if(y >= width06 && y<=width08){
            opcityNumber = 1-(y-width06)/(width02);
            this.setState({
                opcityNumber:opcityNumber,
            })
        }
        // 原本以为是文字的，不过看着微信的效果太平滑了。所以我就弄成照片了。
        // 开始显示朋友圈图片。
        if(y>=width08&&y<=width09 && this.state.friendShow == false){
            this.setState({
                friendShow:true,
            })
        }
        // 朋友圈图片动态效果
        if(y>=width08&&y<=width09){
            let friendHeight = (1-(y-width08)/(width01))*10+40;
            let friendShowOpactiy = (y-width08)/(width01);
            this.setState({
                friendHeight:friendHeight,
                friendShowOpactiy:friendShowOpactiy,
            })
        }

        //隐藏朋友圈照片
        if(y<=width08 && this.state.friendShow == true){
            this.setState({
                friendShow:false,
            })
        }
    }

全部代码

import React, {
    Component,
} from 'react';
import {
    StyleSheet,
    View,
    ScrollView,
    StatusBar,
    Image,
    Dimensions,
} from 'react-native';

let {width,height} = Dimensions.get('window');
const width01 = width*0.1;
const width02 = width*0.2;
const width06 = width*0.6;
const width08 = width*0.8;
const width09 = width*0.9;
export default class TestView1 extends Component {
    // 构造
    constructor(props) {
        super(props);
       this.flag = true;
       this.state={
           opcityNumber:1,
           friendShow:false,
           friendShowOpactiy:1,
           friendHeight:50,
       }
    }

    static navigationOptions = {
        header:null,
    };

    render() {
        return (
            
                
                {/* 返回按键和照相机图片 */}
                
                    
                    
                    

                    
                
                {/* 朋友圈照片。 */}
                {this.state.friendShow?(
                    
                        
                            
                            

                            
                        
                    
                ):()}
                this.onScroll(evt)}
                    scrollEventThrottle = {16}
                >
                    

                    
                    
                    
                
            
        );
    }
    onScroll(evt){
        let y = evt.nativeEvent.contentOffset.y;
        // 隐藏返回按键和照相机
        if(y >= width06 && y<=![back_black_white.png](https://upload-images.jianshu.io/upload_images/12082766-4ebd62e10241a735.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
width08){
            opcityNumber = 1-(y-width06)/(width02);
            this.setState({
                opcityNumber:opcityNumber,
            })
        }
        // 原本以为是文字的，不过看着微信的效果太平滑了。所以我就弄成照片了。
        // 开始显示朋友圈图片。
        if(y>=width08&&y<=width09 && this.state.friendShow == false){
            this.setState({
                friendShow:true,
            })
        }
        // 朋友圈图片动态效果
        if(y>=width08&&y<=width09){
            let friendHeight = (1-(y-width08)/(width01))*10+40;
            let friendShowOpactiy = (y-width08)/(width01);
            this.setState({
                friendHeight:friendHeight,
                friendShowOpactiy:friendShowOpactiy,
            })
        }

        //隐藏朋友圈照片
        if(y<=width08 && this.state.friendShow == true){
            this.setState({
                friendShow:false,
            })
        }
    }
}

另外本代码中使用的照片（因为是白色的，所以看不到）

back_black_white.png

camera.png

friend.png

如有其它想法，欢迎交流。
另外我没有找到可以设置背景色的方式，如果有请告知。谢谢。