react-native-sf-tablist v1.1.0

react-native-sf-tablist

支持多页数据切换，上拉刷新

支持tab上方悬浮

支持数据缓存，在切换时无卡顿感

支持空数据的页面显示

支持tab展开选择

安装

• npm install react-native-sf-tablist

Props

Methods

例子

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View,TouchableHighlight,Image,Dimensions} from 'react-native';
import SFTabList from "react-native-sf-tablist"
import SFNet from "react-native-sf-net"
const {width,height} = Dimensions.get('window')
export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = {

        }
    }
    componentWillMount(){
        SFNet.config('https://api.food.d2.sf-soft.com/client/');

    }
    renderItems = ({item, index}) => {
        return (
            <View style={{
                padding:20
            }}>
                <Text>
                    {item.shop_name}
                </Text>
                <Image source={{uri:item.shop_banner}} style={{
                    width:width-40,
                    height:100,
                    marginTop:10
                }}>

                </Image>
            </View>
        )
    }
    renderSepara = () => {
        return (
            <View style={{
                height: 10
            }}>

            </View>
        )
    }
    renderHeader = () => {
        return (
            <View style={{
                height:150,
                backgroundColor:'red'
            }}>

            </View>
        )
    }
    clickTest = () => {
        this.tabList.addData(this.state.ds[1]);
    }
    clickBar = (index) => {
        //this.tabList.setData(this.state.ds[index])
    }
    onReqData = (index) => {
        var params = {
            token: '5A1d2sKw2oh4Ewd8SNPyz2ShmcDgUKrg',
            page: 1,
            shop_type: 57,
            type: index,
            la: '121.587767',
            lo: '38.913846',
        }
        SFNet.post('shop/list',params,(ret)=>{
            console.log(ret);
            this.tabList.setData(ret.data);
        },(err)=>{
            console.log(error)
        });

    }
    onBeginRefreshFooter = () => {
        // this.tabList.addData(this.state.ds[1]);
        this.tabList.endRefreshNomore()
    }
    render() {
        return (
            <View style={styles.container}>
                <View style={{
                    height:50,
                    backgroundColor:'black'
                }}>

                </View>
                <SFTabList
                    ref={(ref)=>{this.tabList = ref}}
                    barTitles={[['全部','哈哈'], '附近', '精选','热销']}
                    barWidth={width/4}
                    barHeight={50}
                    renderItem={this.renderItems}
                    headerComponent={this.renderHeader}
                    ItemSeparatorComponent={this.renderSepara}
                    onReqData={this.onReqData}
                    onBeginRefreshFooter={this.onBeginRefreshFooter}
                    onClickBar={this.clickBar}
                    showsVerticalScrollIndicator={false}
                    tabFloatTop={50}
                >

                </SFTabList>
            </View>
        );
    }
}