0.1.9 • Published 10 months ago
react-native-scroll-head-tab-view-fixed v0.1.9
Base On react-native-scroll-head-tab-view fix @react-native-community/viewpager to react-native-pager-view
react-native-scroll-head-tab-view
Based on react-native-scrollable-tab-view, the head view slides with each tab, and the TabBar reaches a certain sliding distance to attach to the top
Add to project
#// note: skip this step if scrollable-tab-view is installed
#yarn add @react-native-community/viewpager;
//note: now use the react-native-pager-view
yarn add react-native-pager-view;
yarn add react-native-scroll-head-tab-view;
Basic usage
import React, { useState, useCallback } from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { ScrollTabView, ScrollView, FlatList } from 'react-native-scroll-head-tab-view';
function TabView1(props) {
const data = new Array(200).fill({});
const renderItem = ({ item, index }) => {
return (
<View style={{ marginVertical: 2, padding: 10, borderWidth: 1 }}>
<Text>{'tab1 => ' + index}</Text>
</View>
);
};
return <FlatList {...props} data={data} renderItem={renderItem} {...props} />;
}
function TabView2(props) {
const data = new Array(100).fill({});
const renderItem = ({ item, index }) => {
return (
<View style={{ marginVertical: 2, padding: 10, borderWidth: 1 }}>
<Text>{'tab2 => ' + index}</Text>
</View>
);
};
return <FlatList data={data} renderItem={renderItem} {...props} />;
}
function TabView3(props) {
const data = new Array(20).fill({});
return (
<ScrollView {...props}>
{data.map((o, i) => (
<View style={{ marginVertical: 2, padding: 10, borderWidth: 1 }}>
<Text>{'tab3 => ' + i}</Text>
</View>
))}
</ScrollView>
);
}
export default function Example() {
const [headerHeight, setHeaderHeight] = useState(200);
const headerOnLayout = useCallback((event: any) => {
const { height } = event.nativeEvent.layout;
setHeaderHeight(height);
}, []);
const _renderScrollHeader = useCallback(() => {
const data = new Array(10).fill({});
return (
<View onLayout={headerOnLayout}>
<View style={{ backgroundColor: 'pink' }}>
{data.map((o, i) => (
<View style={{ marginVertical: 2, padding: 10, borderWidth: 1 }}>
<Text>{'header => ' + i}</Text>
</View>
))}
</View>
</View>
);
}, []);
return (
<View style={styles.container}>
<ScrollTabView headerHeight={headerHeight} renderScrollHeader={_renderScrollHeader}>
<TabView1 tabLabel="tab1" />
<TabView2 tabLabel="tab2" />
<TabView3 tabLabel="tab3" />
</ScrollTabView>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
0.1.9
10 months ago
0.1.8
10 months ago
0.1.7
10 months ago
0.1.6
10 months ago
0.1.5
10 months ago
0.1.4
10 months ago
0.1.3
10 months ago
0.1.2
10 months ago
0.1.1
10 months ago
0.0.9
10 months ago
0.0.8
10 months ago
0.0.7
10 months ago
0.0.6
10 months ago
0.0.5
10 months ago
0.0.4
10 months ago
0.0.3
10 months ago
0.0.2
10 months ago
0.0.1
10 months ago