1 | ### TabScene组件: 特别提醒如果TabScene不在最顶层,请在顶层设置<View style={{flex:1}}>否则下面的content容器不显示
|
2 |
|
3 | | 参数名称 | 描述 | 类型 | 属性值 | 默认值|
|
4 | |---|---|---|---|---|
|
5 | | tabLabel | 设置每个tab按钮的titile | `String` | -- | -- |
|
6 | | tabBarPosition | 设置tabBar的布局位置,顶部或底部 | `String` | `top` |
|
7 | | initialPage | 设置初始时activeTab的key | `Number` | `0` |
|
8 | | onChangeTab | callback函数 | `function` | (obj)=>{} | `{ i:currentKey, from: prevKey, ref: dom }`
|
9 | | renderTabBar | 要渲染的tabBar组件,通过向该函数传递自定义组件来修改默认的tabBarCompontent |`func` | 默认自动渲染`TabBarCompontent` |
|
10 | | tabActiveText | 焦点文字颜色样式 | `Text.propTypes.style` | Object |`{color: #82A0FA }`|
|
11 | | tabDefaultText | 普通文字颜色样式 | `Text.propTypes.style` | Object |`{color: #888 }`|
|
12 | | tabBarStyle | 设置整个tabBar容器组件的样式 | `Text.propTypes.style` | Object | `null`
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 | ```jsx
|
21 | static propTypes = {
|
22 | tabBarPosition: PropTypes.oneOf(['top', 'bottom']),
|
23 | initialPage: PropTypes.number,
|
24 | onChangeTab: PropTypes.func,
|
25 | onScroll: PropTypes.func,
|
26 | renderTabBar: PropTypes.func,
|
27 | style: ViewStylePropTypes || (View.propTypes && View.propTypes.style),
|
28 | contentProps: PropTypes.object,
|
29 | tabActiveText: Text.propTypes.style,
|
30 | tabDeafultText: Text.propTypes.style,
|
31 | tabBackground: ViewStylePropTypes || (View.propTypes && View.propTypes.style),
|
32 | tabBarBarbackground: ViewStylePropTypes || (View.propTypes && View.propTypes.style,
|
33 | tabUnderLineStyle: ViewStylePropTypes || (View.propTypes && View.propTypes.style),
|
34 | }
|
35 | ```
|
36 |
|
37 | ```jsx
|
38 | static defaultProps = {
|
39 | tabBarPosition: 'top',
|
40 | initialPage: 0,
|
41 | page: -1,
|
42 | onChangeTab: () => {},
|
43 | }
|
44 | ```
|
45 |
|
46 | ```jsx
|
47 | const styles = StyleSheet.create({
|
48 | tabActiveText: {
|
49 | color: '#82A0FA',
|
50 | },
|
51 | tabDeafultText: {
|
52 | color: '#888',
|
53 | },
|
54 | tabBackground: {
|
55 | flex: 1,
|
56 | alignItems: 'center',
|
57 | justifyContent: 'center',
|
58 | paddingBottom: 10,
|
59 | },
|
60 | defaultTabBarStyle: {
|
61 | height: 50,
|
62 | flexDirection: 'row',
|
63 | justifyContent: 'space-around',
|
64 | borderWidth: 1,
|
65 | borderTopWidth: 0,
|
66 | borderLeftWidth: 0,
|
67 | borderRightWidth: 0,
|
68 | borderColor: '#ccc',
|
69 | },
|
70 | });
|
71 | ```
|
72 |
|
73 |
|
74 | ### Sample Code
|
75 |
|
76 | ```jsx
|
77 | <View style={{ marginTop: 30 }}>
|
78 | <TabScene>
|
79 | <View tabLabel="全部">
|
80 | <Text>全部</Text>
|
81 | </View>
|
82 | <View tabLabel="未审阅">
|
83 | <Text>未审阅</Text>
|
84 | </View>
|
85 | <View tabLabel="已审阅">
|
86 | <Text>已审阅</Text>
|
87 | </View>
|
88 | </TabScene>
|
89 | <TabScene
|
90 | defaultTextStyle={{ color: '#fff' }}
|
91 | activeTextStyle={{ color: 'red' }}
|
92 | tabBarStyle={{
|
93 | backgroundColor: '#82A0FA',
|
94 | height: 70,
|
95 | }}
|
96 | onChangeTab={onChangeTabFn}
|
97 | >
|
98 | <View tabLabel="React">
|
99 | <Text>vs ! Vue </Text>
|
100 | </View>
|
101 | <View tabLabel="Vue">
|
102 | <Text>vs ! React </Text>
|
103 | </View>
|
104 | <View tabLabel="React-Native">
|
105 | <Text>坑</Text>
|
106 | </View>
|
107 | </TabScene>
|
108 | </View>
|
109 | ``` |
\ | No newline at end of file |