react-native-parallax-scroll-view

安装

npm install react-native-parallax-scroll-view

使用

import React, {Component} from 'react';
import {View, Text,Image,StyleSheet} from 'react-native';
import ParallaxScrollView from 'react-native-parallax-scroll-view';

export default class ParallaxTest extends Component {
    render() {
        return (
            <ParallaxScrollView
                backgroundColor="#983738"
                contentBackgroundColor="pink"
                //下面渲染背景
                renderBackground={() =>  <Image style={{width:window.width,height:350}} source={require('../imgs/qiwei.jpg')}/>}
                //下面是渲染前景
                renderForeground={() => (
                    <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={{height:30, textAlign: 'right', color: 'white', padding: 5, fontSize: 20,marginTop:20 }}>Hello</Text>}
                renderStickyHeader={
                    () =>  <View key="sticky-header" style={styles.stickySection}>
                        <Text style={styles.stickySectionText}>Header</Text>
                    </View>
                }
                stickyHeaderHeight={30}
                parallaxHeaderHeight={ 250 }
                >
                <View style={{height: 100}}>
                    <Text>Scroll me</Text>
                </View>
                <View style={{height: 100}}>
                    <Text>Scroll me</Text>
                </View>
                <View style={{height: 100}}>
                    <Text>Scroll me</Text>
                </View>
                <View style={{height: 100}}>
                    <Text>Scroll me</Text>
                </View>
                <View style={{height: 100}}>
                    <Text>Scroll me</Text>
                </View>
                <View style={{height: 100}}>
                    <Text>Scroll me</Text>
                </View>
                <View style={{height: 100}}>
                    <Text>Scroll me</Text>
                </View>
            </ParallaxScrollView>
        );
    }
}

const styles = StyleSheet.create({
    stickySection: {
        flexDirection: 'row',
        alignItems: "center",
        height: 30,
        width: window.width,
        backgroundColor: "red",
        justifyContent: 'space-around'
    },
    stickySectionText: {
        color: 'white',
        fontSize: 20,
        margin: 10
    },
})