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 函数 页面切换回调
相关推荐
wen's8 小时前
React Native安卓刘海屏适配终极方案:仅需修改 AndroidManifest.xml!
android·xml·react native
Misha韩8 小时前
React Native 一些API详解
react native·react.js
小李飞飞砖8 小时前
React Native 组件间通信方式详解
javascript·react native·react.js
小李飞飞砖8 小时前
React Native 状态管理方案全面对比
javascript·react native·react.js
朝阳3910 小时前
ReactNative【实战系列教程】我的小红书 8 -- 我(含左侧弹窗菜单,右下角图标等)
react native
朝阳391 天前
ReactNative【实战系列教程】我的小红书 6 -- 购物(含商品搜索、商品分类、商品列表)
react native
Misha韩2 天前
React Native 基础组件详解<二>
react native·组件
朝阳392 天前
ReactNative【实战】瀑布流布局列表(含图片自适应、点亮红心动画)
react native
_一两风4 天前
深入理解 React 事件机制与 DOM 事件系统
react native·react.js
Misha韩4 天前
React Native 初始化项目和模拟器运行
react native