react-native视差滚动组件使用

看到许多app在界面上实现了头部的图片和文字的渐隐效果，在网上找到一个组件，实现了这个功能。如果要体现比较好的效果还需要在细节地方多研究。
这里写出来仅供学习的进一步的研究

看看效果图

react-native-parallax-scroll-view ,github地址

ScreenFlow.gif

下面看一下代码

   import React, { Component } from 'react'
import {
  Dimensions,
  Image,
  Text,
  View,
  AppRegistry,
  StatusBar
} from 'react-native';
//导入组件
import ParallaxScrollView from 'react-native-parallax-scroll-view';

const window = Dimensions.get('window');//获取宽度
console.log(window.width);

class Nested extends Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
         //方向，可以为row
        <View style={{ flex: 1, flexDirection: 'column' }}>
          <View style={{ width: 60, backgroundColor: 'red' }}/>
         //滚动效果都在下面这个组件
          <ParallaxScrollView
              style={{ flex: 1, backgroundColor: 'hotpink', overflow: 'hidden' }}
             //下面渲染背景
              renderBackground={() =>  <Image style={{width:window.width,height:350}} source={require('./images/schedule-background.png')}/>}
             //下面是渲染前景
              renderForeground={() => (
                <View>
                <View style={{alignItems: 'center', justifyContent: 'center',marginTop:50}}>
              
                <Image style={{borderRadius:50
              }} source={{
                  uri: 'https://pbs.twimg.com/profile_images/2694242404/5b0619220a92d391534b0cd89bf5adc1_400x400.jpeg',
                  width: 100,
                  height: 100
                }}/>
                </View>
               
                  <Text style={{paddingVertical: 5,textAlign:'center',color:'white'}}>
                    Talks by Rich Hickey
                   </Text>
                   <Text style={{paddingVertical: 5 ,textAlign:'center',color:'white'}}>
                    CTO of Cognitec, Creator of Clojure
                  </Text>
                
                </View>
                
            )}
             //渲染固定头部
              renderFixedHeader={() => <Text style={{ textAlign: 'right', color: 'white', padding: 5, fontSize: 20,marginTop:20 }}>Hello</Text>}
              parallaxHeaderHeight={ 350 }>
                        <View style={{ alignItems: 'center'}}><Text style={{ fontSize: 20 ,backgroundColor:"#519caf",width:window.width,textAlign:'center'}}>This is parallaxbox</Text></View>          

          </ParallaxScrollView>
          
        </View>
        <View style={{ height: 30, backgroundColor: '#6577cc' }}/>
      </View>
    );
  }
}

export default Nested;



AppRegistry.registerComponent('parallaxBox', () => Nested);

背景图片用了一张f8app的背景图片，曲线有动态变化效果。
这个组件的api还是有一些，用好了效果就出来了。具体的看github介绍