`ReactNative 跨平台实现TabView嵌套ScrollView滚动吸顶效果,采用react-native-tab-view+flatlist实现效果丝滑`
npm install react-native-tab-flatlistReactNative 跨平台实现TabView嵌套ScrollView滚动吸顶效果,采用react-native-tab-view+flatlist实现效果丝滑
使用前需要先安装react-native-tab-view 与 react-native-pager-viewnpm install react-native-tab-flatlist --save
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