React Navigation--TabNavigator 详细的例子

1. /** 
2.  * Created by YiBing on 2017/5/5. 
3.  * 本程序效果：类似Android中的ViewPager--有2个页面，可以随手势来回切换，也可以点击Tab切换。 
4.  * API Definition -- TabNavigator(RouteConfigs, TabNavigatorConfig)。 
5.  * 
6.  * RouteConfigs -- 和StackNavigator的RouteConfigs一样，可以看上一篇文章（React Navigation--StackNavigator 详细的例子<a target="_blank" href="http://blog.csdn.net/yibing2011/article/details/71195316">http://blog.csdn.net/yibing2011/article/details/71195316</a>）。 
7.  * 
8.  * TabNavigatorConfig -- 
9.  *   1. tabBarComponent - component to use as the tab bar, 
10.  *      e.g. TabBarBottom (this is the default on iOS), 
11.  *          TabBarTop (this is the default on Android) 
12.  *   2. tabBarPosition - position of the tab bar, can be 'top' or 'bottom' 
13.  *   3. swipeEnabled - whether to allow swiping between tabs 
14.  *   4. animationEnabled - whether to animate when changing tabs 
15.  *   5. lazy - whether to lazily render tabs as needed as opposed to rendering them upfront 
16.  *   6. tabBarOptions - configure the tab bar. 
17.  *      tabBarOptions for TabBarBottom (default tab bar on iOS): 
18.  *          (1) activeTintColor - label and icon color of the active tab 
19.  *          (2) activeBackgroundColor - background color of the active tab 
20.  *          (3) inactiveTintColor - label and icon color of the inactive tab 
21.  *          (4) inactiveBackgroundColor - background color of the inactive tab 
22.  *          (5) showLabel - whether to show label for tab, default is true 
23.  *          (6) style - style object for the tab bar 
24.  *          (7) labelStyle - style object for the tab label 
25.  *          Example: 
26.  *            tabBarOptions: { 
27.  *                  activeTintColor: '#e91e63', 
28.  *                  labelStyle: { 
29.  *                      fontSize: 12, 
30.  *                  }, 
31.  *                  style: { 
32.  *                      backgroundColor: 'blue', 
33.  *                  }, 
34.  *            } 
35.  *      tabBarOptions for TabBarTop (default tab bar on Android): 
36.  *          (1) activeTintColor - label and icon color of the active tab 
37.  *          (2) inactiveTintColor - label and icon color of the inactive tab 
38.  *          (3) showIcon - whether to show icon for tab, default is false 
39.  *          (4) showLabel - whether to show label for tab, default is true 
40.  *          (5) upperCaseLabel - whether to make label uppercase, default is true 
41.  *          (6) pressColor - color for material ripple (Android >= 5.0 only) 
42.  *          (7) pressOpacity - opacity for pressed tab (iOS and Android < 5.0 only) 
43.  *          (8) scrollEnabled - whether to enable scrollable tabs 
44.  *          (9) tabStyle - style object for the tab 
45.  *          (10)indicatorStyle - style object for the tab indicator (line at the bottom of the tab) 
46.  *          (11)labelStyle - style object for the tab label 
47.  *          (12)iconStyle - style object for the tab icon 
48.  *          (13)style - style object for the tab bar 
49.  *          Example: 
50.  *            tabBarOptions: { 
51.  *                  labelStyle: { 
52.  *                      fontSize: 12, 
53.  *                  }, 
54.  *                  style: { 
55.  *                      backgroundColor: 'blue', 
56.  *                  }, 
57.  *            } 
58.  *   7. initialRouteName - The routeName for the initial tab route when first loading 
59.  *   8. order - Array of routeNames which defines the order of the tabs 
60.  *   9. paths - Provide a mapping of routeName to path config, which overrides the paths set in the routeConfigs. 
61.  *   10.backBehavior - Should the back button cause a tab switch to the initial tab? If yes, set to initialRoute, 
62.  *      otherwise none. Defaults to initialRoute behavior. 
63.  * 
64.  * Screen Navigation Options -- 
65.  *   1. title - Generic title that can be used as a fallback for headerTitle and tabBarLabel 
66.  *   2. tabBarVisible - True or false to show or hide the tab bar, if not set then defaults to true 
67.  *   3. tabBarIcon - React Element or a function that given { focused: boolean, tintColor: string } 
68.  *                   returns a React.Element, to display in tab bar 
69.  *   4. tabBarLabel - Title string of a tab displayed in the tab bar or React Element or a function that given 
70.  *                    { focused: boolean, tintColor: string } returns a React.Element, to display in tab bar. 
71.  *                    When undefined, scene title is used. To hide, see tabBarOptions.showLabel in the previous section. 
72.  * 
73.  * 
74.  * Navigator Props -- 
75.  *   The navigator component created by TabNavigator(...) takes the following props: 
76.  *      1. screenProps - Pass down extra options to child screens and navigation options, for example: 
77.  *         const TabNav = TabNavigator({ 
78.  *              // config 
79.  *          }); 
80.  *          <TabNav screenProps={ 
81.  *                // this prop will get passed to the screen components as this.props.screenProps 
82.  *              } 
83.  *           /> 
84.  */  
85.   
86. import React from 'react';  
87.   
88. import {  
89.     Button,  
90.     ScrollView,  
91.     Text,  
92.     StyleSheet,  
93. } from 'react-native';  
94.   
95. import {  
96.     TabNavigator,  
97. } from 'react-navigation';  
98.   
99. class MyHomeScreen extends React.Component {  
100.     static navigationOptions = {  
101.         tabBarLabel: 'Home',  
102.         // Note: By default the icon is only shown on iOS. Search the showIcon option below.  
103.         tabBarIcon: ({tintColor}) => (  
104.             <Image  
105.                 source={require('./img/notif-icon.png')}  
106.                 style={[styles.icon, {tintColor: tintColor}]}  
107.             />  
108.         ),  
109.     };  
110.   
111.     render() {  
112.         return (  
113.             <Button  
114.                 onPress={() => this.props.navigation.navigate('Notifications')}  
115.                 title="Go to notifications"  
116.             />  
117.         );  
118.     }  
119. }  
120.   
121. class MyNotificationsScreen extends React.Component {  
122.     static navigationOptions = {  
123.         tabBarLabel: 'Notifications',  
124.         tabBarIcon: ({tintColor}) => (  
125.             <Image  
126.                 source={require('./img/notif-icon.png')}  
127.                 style={[styles.icon, {tintColor: tintColor}]}  
128.             />  
129.         ),  
130.     };  
131.   
132.     render() {  
133.         return (  
134.             <Button  
135.                 onPress={() => this.props.navigation.goBack()}  
136.                 title="Go back home"  
137.             />  
138.         );  
139.     }  
140. }  
141.   
142. const styles = StyleSheet.create({  
143.     icon: {  
144.         width: 26,  
145.         height: 26,  
146.     },  
147. });  
148.   
149. const SimpleTabNavigator = TabNavigator(  
150.     {  
151.         Home: {  
152.             screen: MyHomeScreen,  
153.         },  
154.         Notifications: {  
155.             screen: MyNotificationsScreen,  
156.         },  
157.     },  
158.     {  
159.         tabBarOptions: {  
160.             activeTintColor: '#ff00ff',  
161.         },  
162.     }  
163. );  
164.   
165. export default SimpleTabNavigator;  

顶

0

踩