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 (
            <View >
                <StatusBar
                    translucent = {true}
                    backgroundColor = {'#00000000'}
                    barStyle = {this.state.friendShow?('dark-content'):('light-content')}
                />
                {/* 返回按键和照相机图片 */}
                <View 
                    style={{
                        flexDirection:'row',
                        justifyContent:'space-between',
                        position:'absolute',
                        width:width,
                        height:50,
                        top:20,
                        zIndex:2,
                        alignItems:'center',
                        paddingLeft:20,
                        paddingRight:20,
                        opacity:this.state.opcityNumber,
                    }}

                >
                    <Image style={{width:32,height:32}} source={require('../../resources/image/back_black_white.png')}>
                    </Image>
                    <Image style={{width:32,height:32}}  source={require('../../resources/image/camera.png')}>

                    </Image>
                </View>
                {/* 朋友圈照片。 */}
                {this.state.friendShow?(
                    <View 
                        style={{
                            position:'absolute',
                            height:20+this.state.friendHeight,
                            paddingTop:20,
                            width:width,
                            backgroundColor:'rgba(2555,255,255,'+this.state.friendShowOpactiy+')',
                            zIndex:3,
                    }}>
                        <View style={{
                            height:this.state.friendHeight,
                            justifyContent:'center',
                            left:this.state.friendHeight*0.5,
                        }}>
                            
                            <Image 
                                style = {{width:100*(this.state.friendHeight/50),height:this.state.friendHeight*0.8}}
                                source = {require('../../resources/image/friend.png')}
                            >

                            </Image>
                        </View>
                    </View>
                ):(<View></View>)}
                <ScrollView
                    showsVerticalScrollIndicator = {false}
                    onScroll = {(evt)=>this.onScroll(evt)}
                    scrollEventThrottle = {16}
                >
                    <Image source={require('../../resources/image/cooker/bg.png')} 
                        style={{width:width,height:width}}>

                    </Image>
                    <View style={{height:height}}>
                    </View>
                </ScrollView>
            </View>
        );
    }
    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

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