react native 仿支付宝更多

公司要做一个支付宝更多的滑动效果。查找react naive 没有好的组件来实现。自己做了一个demo.

 

效果图

 

代码实现：

import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    ScrollView,
    Text,
} from 'react-native';
import  {deviceInfo} from '../../../utils'
import  ScrollableTab from '../../common/ScrollableTab'
export default class ZhiHuBao extends Component<{}> {

    constructor(props){
        super(props)
        this.state={
            dataType:['11','22','33','44','55','66','77'],
            itemHeight:[],
            stickyHeight:0,
            onMomentumScrollBegin:false,
        }

    }

    componentWillMount(){

    }



    changePosition(index){
        this.refs.ScrollableTab.changePosition(index)
    }

    callbackChangeIndex(index){
        this.state.onMomentumScrollBegin=true
        this.refs.ScrollView.scrollTo({x:0, y: this.state.itemHeight[index]-this.state.stickyHeight, animated: true})
    }


    _onScroll(e){
        if(!this.state.onMomentumScrollBegin){
            let newScrollOffset=e.nativeEvent.contentOffset.y+this.state.stickyHeight
        /*    if(newScrollOffset>=this.state.itemHeight[0]&&newScrollOffset=this.state.itemHeight[1]&&newScrollOffset=this.state.itemHeight[2]&&newScrollOffset=this.state.itemHeight[3]&&newScrollOffset=this.state.itemHeight[4]&&newScrollOffset=this.state.itemHeight[5]&&newScrollOffset=this.state.itemHeight[6]){
                console.log("item 5")
                this.changePosition(6)
            }*/
            for(let i=0;i=this.state.itemHeight[this.state.itemHeight.length-1]){
                    this.changePosition(i)
                    return
                }else if(newScrollOffset>=this.state.itemHeight[i]&&newScrollOffset
                
                    这个是头部
                
                
                {this.state.dataType[0]}
                {this.state.dataType[1]}
                {this.state.dataType[2]}
                {this.state.dataType[3]}
                {this.state.dataType[4]}
                {this.state.dataType[5]}
                {this.state.dataType[6]}
            
        )
    }
}

const styles = StyleSheet.create({
    contain: {
        flex: 1,
        backgroundColor: '#f4f4f4',
        alignItems: 'center',

    },
    head:{
        width:deviceInfo.deviceWidth,
        height:150,
        backgroundColor:'#0f0',
        justifyContent:'center',
        alignItems:'center'
    },
    stickyHeader:{
        width:deviceInfo.deviceWidth,
        height:40,
        backgroundColor:'#0ff'
    },
    item:{
        width:deviceInfo.deviceWidth,
        height:80,
        backgroundColor:'#fff',
        justifyContent:'center',
        alignItems:'center'
    },


});

 

 

import React, {Component} from 'react';

import {
    Text,
    View,
    ScrollView,
    StyleSheet,
    TouchableOpacity
} from 'react-native';
import PropTypes from 'prop-types';


export default class ScrollableTab extends Component<{}> {

    static propTypes = {
        titleArr:PropTypes.array,
    }

    static defaultProps = {
    }

    constructor(props){
        super(props)
        this.state={
            titleArr:this.props.titleArr,
            position:0
        }
    }

    clickChange(index){
        if(index!=this.state.position){
            this.props.callback&&this.props.callback(index)
            this.changePosition(index)
        }
    }

    changePosition(index){
        if(index!=this.state.position){
            this.refs.ScrollView.scrollTo({x: index * 70, y: 0, animated: false})
            this.setState({
                position:index
            })
        }

    }

    render() {
        let tempView=[];
         const {titleArr,position}=this.state;
        for(let i=0;ithis.clickChange(i)} key={i}>
                    
                        {titleArr[i]}
                    
                
            )
        }
        return (
            
                {tempView}
            
        )
    }
}

const styles = StyleSheet.create({
     item:{
         height:40,
         width:70,
         justifyContent:'center',
         alignItems:'center',
     },
    unItem:{
        width:70,
        height:40,
        justifyContent:'center',
        alignItems:'center',
    },


});