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 {
  constructor(props: any) {
    super(props);
    this.state = {
      activeIndex: 0
    };
  }
  renderScene = (props: any) => {
    switch (props.route.key) {
      case '1':
        return (
          
                          style={{
                width: '100%',
                height: 1000,
                backgroundColor: '#5a32ac',
              }}
            />
                          style={{
                width: '100%',
                height: 1000,
                backgroundColor: 'yellow',
              }}
            />
          
        );
      case '2':
        return (
                      style={{zIndex: 999}}
            isActive={this.state.activeIndex == 1 ? true : false}
            data={[1, 2, 3]}
            renderItem={({item, index}) => {
              return (
                                  style={{
                    width: '100%',
                    height: 600,
                    backgroundColor: index % 2 == 0 ? '#f93776' : '#48a248',
                  }}
                />
              );
            }}
          />
        );
    }
  };

// 渲染头部 renderTabHeader = (props: any, position: any) => { const { navigationState: {index}, } = props; return ( style={{ height: 100, width: '100%', marginTop: 200, flexDirection: 'row', alignItems: 'flex-end', }}> style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}> 页面1 style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}> 页面2 ); }; render() { return ( 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, }); }} /> ); } }`

`接口参考`

headerHeight

头部header高度

stopHeight

头部header可上移距离

renderHeader

* props等同于react-native-tab-view Api中 renderTabBar方法参数

* position FlatList 或 ScrollView 滚动的位置

renderTabBar（此方法与renderHeader二选一实现一个即可）

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

renderScene`

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

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