RN 原生吸顶组件封装

简介

swift 复制代码

原生封装的支持吸顶和tab切换的UI组件，支持自定义顶部，tab栏，和内容。

演示

使用教程

bash 复制代码

yarn add https://github.com/Onedayago/RNStickyTabScrollView
cd ios 
pod install

使用demo

javascript 复制代码

import React, {useRef, useState} from "react";
import {View, Text, ScrollView, TouchableOpacity, Animated, Dimensions} from "react-native";
import ScrollContainer from "rn-scrollview";
const window = Dimensions.get("window");
const width = window.width;

const App = () => {

const scrollContainer = useRef(null);
const [pageIndex, setPageIndex] = useState(0);

const renderHeader = () => {
    return(
        <View style={{width: width, height: 100, backgroundColor: 'black'}}>
            <Text>我是顶部</Text>
        </View>
    )
}

const renderTab = () => {
    return(
        <View style={{backgroundColor: 'green', flexDirection: 'row'}}>
            <TouchableOpacity
                style={[{width: 50, height: 50, justifyContent: 'center', alignItems: 'center'}, pageIndex===0?{backgroundColor: 'blue'}:{}]}
                onPress={()=>{
                    scrollContainer.current.setPage(0);
                    setPageIndex(0);
                }}
            >
                <Text>tab1</Text>
            </TouchableOpacity>
            <TouchableOpacity
                style={[{width: 50, height: 50, justifyContent: 'center', alignItems: 'center'}, pageIndex===1?{backgroundColor: 'blue'}:{}]}
                onPress={()=>{
                    scrollContainer.current.setPage(1);
                    setPageIndex(1);
                }}
            >
                <Text>tab2</Text>
            </TouchableOpacity>
        </View>
    )
}

const renderPage = (item, index) => {
    if(index === 0){
        return(
            <View style={{backgroundColor: 'red'}}>
                <Text>我是第一页面</Text>
                <Text>我是第一页面</Text>
                <Text>我是第一页面</Text>
                <Text>我是第一页面</Text>
                <Text>我是第一页面</Text>
                <Text>我是第一页面</Text>
                <Text>我是第一页面</Text>
                <Text>我是第一页面</Text>
                <Text>我是第一页面</Text>
                <Text>我是第一页面</Text>
                <Text>我是第一页面</Text>
                <Text>我是第一页面</Text>
                <Text>我是第一页面</Text>
                <Text>我是第一页面</Text>
                <Text>我是第一页面</Text>
                <Text>我是第一页面</Text>
                <Text>我是第一页面</Text>
                <Text>我是第一页面</Text>
                <Text>我是第一页面</Text>
                <Text>我是第一页面</Text>
                <Text>我是第一页面</Text>
                <Text>我是第一页面</Text>
                <Text>我是第一页面</Text>
                <Text>我是第一页面</Text>
                <Text>我是第一页面</Text>
                <Text>我是第一页面</Text>
                <Text>我是第一页面</Text>
                <Text>我是第一页面</Text>
                <Text>我是第一页面</Text>
                <Text>我是第一页面</Text>
                <Text>我是第一页面</Text>
                <Text>我是第一页面</Text>
                <Text>我是第一页面</Text>
                <Text>我是第一页面</Text>
                <Text>我是第一页面</Text>
                <Text>我是第一页面</Text>
                <Text>我是第一页面</Text>
                <Text>我是第一页面</Text>
            </View>
        )
    }else{
        return(
            <View style={{backgroundColor: 'blue'}}>
                <Text>我是第二页面</Text>
                <Text>我是第二页面</Text>
                <Text>我是第二页面</Text>
                <Text>我是第二页面</Text>
                <Text>我是第二页面</Text>
                <Text>我是第二页面</Text>
                <Text>我是第二页面</Text>
                <Text>我是第二页面</Text>
                <Text>我是第二页面</Text>
                <Text>我是第二页面</Text>
                <Text>我是第二页面</Text>
                <Text>我是第二页面</Text>
                <Text>我是第二页面</Text>
                <Text>我是第二页面</Text>
                <Text>我是第二页面</Text>
                <Text>我是第二页面</Text>
                <Text>我是第二页面</Text>
                <Text>我是第二页面</Text>
                <Text>我是第二页面</Text>
                <Text>我是第二页面</Text>
                <Text>我是第二页面</Text>
                <Text>我是第二页面</Text>
                <Text>我是第二页面</Text>
                <Text>我是第二页面</Text>
                <Text>我是第二页面</Text>
                <Text>我是第二页面</Text>
                <Text>我是第二页面</Text>
                <Text>我是第二页面</Text>
                <Text>我是第二页面</Text>
                <Text>我是第二页面</Text>
                <Text>我是第二页面</Text>
                <Text>我是第二页面</Text>
                <Text>我是第二页面</Text>
                <Text>我是第二页面</Text>
                <Text>我是第二页面</Text>
                <Text>我是第二页面</Text>
                <Text>我是第二页面</Text>
                <Text>我是第二页面</Text>
                <Text>我是第二页面</Text>
                <Text>我是第二页面</Text>
                <Text>我是第二页面</Text>
                <Text>我是第二页面</Text>
                <Text>我是第二页面</Text>
                <Text>我是第二页面</Text>
                <Text>我是第二页面</Text>
                <Text>我是第二页面</Text>
                <Text>我是第二页面</Text>
                <Text>我是第二页面</Text>
                <Text>我是第二页面</Text>
                <Text>我是第二页面</Text>
                <Text>我是第二页面</Text>
                <Text>我是第二页面</Text>
                <Text>我是第二页面</Text>
                <Text>我是第二页面</Text>
            </View>
        )
    }
}

return(
    <View style={{marginTop: 100}}>
        <ScrollContainer
            data={[1,2]}
            containerHeight={400}
            containerWidth={width}
            Header={renderHeader}
            Tab={renderTab}
            PageContent={renderPage}
            ref={scrollContainer}
            onPageChange={(index)=>{
                setPageIndex(index)
            }}
        >

        </ScrollContainer>
    </View>
)
}

export default App;

组件属性

Prop	Default	TYPE	Description
data	无	数组	分页内容
containerHeight	无	数字	容器总高度
containerWidth	无	数字	容器总宽度
Header	无	组件	顶部组件
Tab	无	组件	渲染自定义Tab
PageContent	无	组件	渲染分页内容
onPageChange	无	函数	页面切换回调