A simple tab scroll view for react native

Last update: Feb 23, 2022

react-native-tab-flatlist

ReactNative 跨平台实现TabView嵌套ScrollView滚动吸顶效果,采用react-native-tab-view+flatlist实现效果丝滑

安装

使用前需要先安装react-native-tab-view react-native-pager-view


npm install react-native-tab-flatlist --save

Demo

开始

import React from 'react';
import {View,Text,} from 'react-native';
import {ScrollView, TabView, FlatList} from '../components/TabScrollView';

export default class Home extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      activeIndex: 0
    };
  }
  renderScene = (props: any) => {
    switch (props.route.key) {
      case '1':
        return (
          <ScrollView isActive={this.state.activeIndex == 0 ? true : false}>
            <View
              style={{
                width: '100%',
                height: 1000,
                backgroundColor: '#5a32ac',
              }}
            />
            <View
              style={{
                width: '100%',
                height: 1000,
                backgroundColor: 'yellow',
              }}
            />
          </ScrollView>
        );
      case '2':
        return (
          <FlatList
            style={{zIndex: 999}}
            isActive={this.state.activeIndex == 1 ? true : false}
            data={[1, 2, 3]}
            renderItem={({item, index}) => {
              return (
                <View
                  style={{
                    width: '100%',
                    height: 600,
                    backgroundColor: index % 2 == 0 ? '#f93776' : '#48a248',
                  }}
                />
              );
            }}
          />
        );
    }
  };

  // 渲染头部
  renderTabHeader = (props: any, position: any) => {
    const {
      navigationState: {index},
    } = props;
    return (
      <View style={{width: '100%', height: 300, backgroundColor: '#2b88f0'}}>
        <View
          style={{
            height: 100,
            width: '100%',
            marginTop: 200,
            flexDirection: 'row',
            alignItems: 'flex-end',
          }}>
          <View
            style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
            <Text style={{fontSize: 18, color: index == 0 ? 'white' : '#000'}}>
              页面1
            </Text>
          </View>
          <View
            style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
            <Text style={{fontSize: 18, color: index == 1 ? 'white' : '#000'}}>
              页面2
            </Text>
          </View>
        </View>
      </View>
    );
  };
  render() {
    return (
      <View style={{flex: 1}}>
        <TabView
          renderHeader={this.renderTabHeader}
          headerHeight={300}
          stopHeight={200}
          navigationState={{
            index: this.state.activeIndex,
            routes: [
              {title: '页面1', key: '1'},
              {title: '页面2', key: '2'},
            ],
          }}
          renderScene={this.renderScene}
          onIndexChange={index => {
            this.setState({
              activeIndex: index,
            });
          }}
        />
      </View>
    );
  }
}

接口参考


headerHeight

头部header高度


stopHeight

头部header可上移距离


renderHeader


  • position FlatList 或 ScrollView 滚动的位置

renderTabBar(此方法与renderHeader二选一实现一个即可)


renderHeader参数一致,此方法用于自定义header滚动动画

renderScene

此方法必须返回的是本组件里的FlatList或ScrollView


其他Api请参考 react-native-tab-view

GitHub

https://github.com/jianglingzhi666/react-native-tab-scroll-view
You might also like...

A React component used to render accessible and simple tabs

Faster React Tabs Faster React Tabs is a flexible and context-agnostic React component used to render accessible and simple tabs. You can play with th

May 30, 2022

UI Bar in javascript for react native

UI Bar in javascript for react native

react-native-bottom-toolbar Bottom toolbar styled as in iOS, implemented in JS, typed with Flow. Highly configurable with text or icons (I recommend r

May 6, 2022

React-tabs-navigation is a nice react component that enables navigation through tabs in your web app.

react-tabs-navigation This react component enables navigating through tabs in your web app. It is composed of three different parts: Banner This conte

Aug 8, 2020

React tabs with hooks

@bumaga/tabs Headless tabs component for React Features 📦 super small, 381 B vs 3.5kB react-tabs 🚫 no styles, just logic. Style what you want, as yo

Jul 27, 2022

Draggable atom-like tabs for React

Draggable atom-like tabs for React

React draggable tabs The plugin is inspired by Atom and allows you to use these beautiful tabs in your React App Install just download the repo from n

Mar 27, 2022

An accessible React tabs component

React Accessible Tabs An accessible React tabs component, ported from my vanilla JS plugin. Demo See it in action. Usage Installation npm install reac

Dec 4, 2020

Declarative, modular and accessible React tabs component

react-web-tabs Modular and accessible React tabs according to the WAI-ARIA Authoring Practices 1.1. Demo See the demo website for a live example. Docu

Apr 29, 2022

Tabs navigation component for React.

Easy to use React tab component 3 different looks/themes Define transition speed or use the navigation in the bottom Nest tab components inside other

Dec 10, 2018

React Tabs component.

React Tabs component.

rc-tabs React Tabs component. Screenshot Example http://localhost:8000/examples online example: https://tabs.react-component.now.sh/ install Feature K

Aug 8, 2022
Headless, simple, and highly flexible tab-like primitives built with react hooks

react-headless-tabs Headless and highly flexible tab-like primitives built with react hooks ?? Check out the documentation and interactive examples! F

Jul 28, 2022
💃 Make your react tab dance🕺
💃 Make your react tab dance🕺

A mobile support, draggable, editable and api based Tab for ReactJS. Support react >= v16.3 Note: Since v2, we don't support v15 and old styled-compon

Jul 18, 2022
A fully accessible, extravagantly flexible, React-powered Tab Panel component

react-aria-tabpanel SEEKING CO-MAINTAINERS! Continued development of this project is going to require the work of one or more dedicated co-maintainers

Aug 7, 2022
Atom like draggable tab react component
Atom like draggable tab react component

React-draggable-tab Atom like draggable tab react component. Demo View Demo Installation npm install --save react-draggable-tab React v0.14 is support

Apr 27, 2022
React reusable tab component
React reusable tab component

react-re-super-tabs React reusable tab component Demo Installing yarn: yarn add react-re-super-tabs npm: npm install react-re-super-tabs --save Usage

May 7, 2022
An accessible and easy tab component for ReactJS.

react-tabs An accessible and easy tab component for ReactJS. https://reactcommunity.org/react-tabs/ Supports React 16.3.0 or newer react-tabs was test

Aug 8, 2022
A multi-tab layout manager
A multi-tab layout manager

FlexLayout FlexLayout is a layout manager that arranges React components in multiple tab sets, tabs can be resized and moved. Run the Demo Try it now

Aug 1, 2022
Fast, open and free-to-use new tab page for modern browsers
Fast, open and free-to-use new tab page for modern browsers

Mue Mue is a fast, open and free-to-use browser extension that gives a new, fresh and customisable tab page to modern browsers. Table of contents Scre

Jul 12, 2022
UseTabs - Reusable way to create smooth tab highlights
UseTabs - Reusable way to create smooth tab highlights

useTabs Reusable way to create smooth tab highlights. Installation Install my-pr

Jul 31, 2022
Simple blacklist hook for react-navigation to toggle top/bottom tabs.

react-navigation-blacklist Simple blacklist hook for react-navigation to toggle top/bottom tabs. Installation Make sure you have installed react-navig

Nov 22, 2021