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 (
      
         //方向，可以为row
        
          
         //滚动效果都在下面这个组件
            }
             //下面是渲染前景
              renderForeground={() => (
                
                
              
                
                
               
                  
                    Talks by Rich Hickey
                   
                   
                    CTO of Cognitec, Creator of Clojure
                  
                
                
                
            )}
             //渲染固定头部
              renderFixedHeader={() => Hello}
              parallaxHeaderHeight={ 350 }>
                        This is parallaxbox          

          
          
        
        
      
    );
  }
}

export default Nested;



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

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