-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathSec.js
94 lines (87 loc) · 5.32 KB
/
Sec.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
import * as React from 'react';
import { View, StyleSheet, Dimensions, Text } from "react-native";
import { SceneMap } from 'react-native-tab-view';
import { HScrollView } from 'react-native-head-tab-view'
import { CollapsibleHeaderTabView } from 'react-native-tab-view-collapsible-header'
const FirstRoute = () => (
<HScrollView index={0}>
<View style={[styles.scene, { backgroundColor: '#ff4081' }]}><Text>content</Text></View>
<View style={[styles.scene, { backgroundColor: '#ff4081' }]}><Text>content</Text></View>
<View style={[styles.scene, { backgroundColor: '#ff4081' }]}><Text>content</Text></View>
<View style={[styles.scene, { backgroundColor: '#ff4081' }]}><Text>content</Text></View>
<View style={[styles.scene, { backgroundColor: '#ff4081' }]}><Text>content</Text></View>
<View style={[styles.scene, { backgroundColor: '#ff4081' }]}><Text>content</Text></View>
<View style={[styles.scene, { backgroundColor: '#ff4081' }]}><Text>content</Text></View>
<View style={[styles.scene, { backgroundColor: '#ff4081' }]}><Text>content</Text></View>
<View style={[styles.scene, { backgroundColor: '#ff4081' }]}><Text>content</Text></View>
<View style={[styles.scene, { backgroundColor: '#ff4081' }]}><Text>content</Text></View>
<View style={[styles.scene, { backgroundColor: '#ff4081' }]}><Text>content</Text></View>
<View style={[styles.scene, { backgroundColor: '#ff4081' }]}><Text>content</Text></View>
<View style={[styles.scene, { backgroundColor: '#ff4081' }]}><Text>content</Text></View>
<View style={[styles.scene, { backgroundColor: '#ff4081' }]}><Text>content</Text></View>
<View style={[styles.scene, { backgroundColor: '#ff4081' }]}><Text>content</Text></View>
<View style={[styles.scene, { backgroundColor: '#ff4081' }]}><Text>content</Text></View>
<View style={[styles.scene, { backgroundColor: '#ff4081' }]}><Text>content</Text></View>
<View style={[styles.scene, { backgroundColor: '#ff4081' }]}><Text>content</Text></View>
<View style={[styles.scene, { backgroundColor: '#ff4081' }]}><Text>content</Text></View>
</HScrollView>
);
const SecondRoute = () => (
<HScrollView index={1}>
<View style={[styles.scene, { backgroundColor: '#673ab7' }]}><Text>content2</Text></View>
<View style={[styles.scene, { backgroundColor: '#673ab7' }]}><Text>content2</Text></View>
<View style={[styles.scene, { backgroundColor: '#673ab7' }]}><Text>content2</Text></View>
<View style={[styles.scene, { backgroundColor: '#673ab7' }]}><Text>content2</Text></View>
<View style={[styles.scene, { backgroundColor: '#673ab7' }]}><Text>content2</Text></View>
<View style={[styles.scene, { backgroundColor: '#673ab7' }]}><Text>content2</Text></View>
<View style={[styles.scene, { backgroundColor: '#673ab7' }]}><Text>content2</Text></View>
<View style={[styles.scene, { backgroundColor: '#673ab7' }]}><Text>content2</Text></View>
<View style={[styles.scene, { backgroundColor: '#673ab7' }]}><Text>content2</Text></View>
<View style={[styles.scene, { backgroundColor: '#673ab7' }]}><Text>content2</Text></View>
<View style={[styles.scene, { backgroundColor: '#673ab7' }]}><Text>content2</Text></View>
<View style={[styles.scene, { backgroundColor: '#673ab7' }]}><Text>content2</Text></View>
<View style={[styles.scene, { backgroundColor: '#673ab7' }]}><Text>content2</Text></View>
<View style={[styles.scene, { backgroundColor: '#673ab7' }]}><Text>content2</Text></View>
<View style={[styles.scene, { backgroundColor: '#673ab7' }]}><Text>content2</Text></View>
<View style={[styles.scene, { backgroundColor: '#673ab7' }]}><Text>content2</Text></View>
<View style={[styles.scene, { backgroundColor: '#673ab7' }]}><Text>content2</Text></View>
<View style={[styles.scene, { backgroundColor: '#673ab7' }]}><Text>content2</Text></View>
<View style={[styles.scene, { backgroundColor: '#673ab7' }]}><Text>content2</Text></View>
<View style={[styles.scene, { backgroundColor: '#673ab7' }]}><Text>content2</Text></View>
<View style={[styles.scene, { backgroundColor: '#673ab7' }]}><Text>content2</Text></View>
<View style={[styles.scene, { backgroundColor: '#673ab7' }]}><Text>content2</Text></View>
<View style={[styles.scene, { backgroundColor: '#673ab7' }]}><Text>content2</Text></View>
<View style={[styles.scene, { backgroundColor: '#673ab7' }]}><Text>content2</Text></View>
<View style={[styles.scene, { backgroundColor: '#673ab7' }]}><Text>content2</Text></View>
<View style={[styles.scene, { backgroundColor: '#673ab7' }]}><Text>content2</Text></View>
</HScrollView>
);
const initialLayout = { width: Dimensions.get('window').width };
export default function TabViewExample() {
const [index, setIndex] = React.useState(0);
const [routes] = React.useState([
{ key: 'first', title: 'First' },
{ key: 'second', title: 'Second' },
]);
const renderScene = SceneMap({
first: FirstRoute,
second: SecondRoute,
});
return (
<View style={{flex:1}}>
<CollapsibleHeaderTabView
renderScrollHeader={() => <View style={{ height: 200, backgroundColor: 'red' }}/>}
navigationState={{ index, routes }}
renderScene={renderScene}
onIndexChange={setIndex}
initialLayout={initialLayout}
/>
</View>
);
}
const styles = StyleSheet.create({
scene: {
height:50,
marginBottom:10
},
});