1+ /**
2+ * Sample React Native App
3+ * https://github.com/facebook/react-native
4+ * @flow
5+ */
6+
7+ import {
8+ StackNavigator ,
9+ TabNavigator ,
10+ } from 'react-navigation' ;
11+
12+ import React from 'react' ;
13+
14+ import {
15+ Image ,
16+ StyleSheet ,
17+ Text ,
18+ AsyncStorage
19+ } from 'react-native' ;
20+
21+ import Test1 from './Test1.js' ;
22+ import Test2 from './Test2.js' ;
23+ import Test3 from './Test3.js' ;
24+ import Detail1 from './Detail1.js' ;
25+ import Detail2 from './Detail2.js' ;
26+
27+ const ShiTuIcon = require ( '../resources/ShiTu.png' ) ;
28+ const GankIcon = require ( '../resources/Gank.png' ) ;
29+ const MainIcon = require ( '../resources/Main.png' ) ;
30+
31+ /**
32+ * 1、Test1是通过普通的属性创建的Tabbar和导航
33+ * 2、Test2是在页面中通过属性创建Tabbar和导航
34+ * 3、Test3是通过封装navigationOptions实现Tabbar和导航的
35+ */
36+
37+ const MyTab = TabNavigator ( {
38+ Test1 : {
39+ screen : Test1 ,
40+ navigationOptions :( { navigation, screenProps} ) => ( {
41+
42+ // StackNavigator 属性部分
43+
44+ // title:'Test1', 同步设置导航和tabbar文字,不推荐使用
45+ headerTitle :'Test1' , // 只会设置导航栏文字,
46+ // header:{}, // 可以自定义导航条内容，如果需要隐藏可以设置为null
47+ // headerBackTitle:'', // 设置跳转页面左侧返回箭头后面的文字，默认是上一个页面的标题。可以自定义，也可以设置为null
48+ // headerTruncatedBackTitle:'', // 设置当上个页面标题不符合返回箭头后的文字时，默认改成"返回"。
49+ // headerRight:{}, // 设置导航条右侧。可以是按钮或者其他。
50+ // headerLeft:{}, // 设置导航条左侧。可以是按钮或者其他。
51+ headerStyle :{
52+ backgroundColor :'red'
53+ } , // 设置导航条的样式。如果想去掉安卓导航条底部阴影可以添加elevation: 0,iOS去掉阴影是。
54+ headerTitleStyle :{
55+ fontSize :30 ,
56+ } , // 设置导航条文字样式。安卓上如果要设置文字居中，只要添加alignSelf:'center'就可以了
57+ // headerBackTitleStyle:{}, // 设置导航条返回文字样式。
58+ // headerTintColor:'green', // 设置导航栏文字颜色。总感觉和上面重叠了。
59+ gesturesEnabled :true , // 是否支持滑动返回收拾，iOS默认支持，安卓默认关闭
60+
61+
62+ // TabNavigator 属性部分
63+
64+ // title:'', 同上
65+ tabBarVisible :true , // 是否隐藏标签栏。默认不隐藏(true)
66+ tabBarIcon : ( ( { tintColor, focused} ) => {
67+ return (
68+ < Image
69+ source = { ! focused ? ShiTuIcon : ShiTuIcon }
70+ style = { [ { height :35 , width :35 } , { tintColor : tintColor } ] }
71+ />
72+ )
73+ } ) , // 设置标签栏的图标。需要单独设置。
74+ tabBarLabel :'识兔' , // 设置标签栏的title。推荐这个方式。
75+ } )
76+ } ,
77+ Test2 : {
78+ screen :Test2 ,
79+ } ,
80+ Test3 :{
81+ screen :Test3 ,
82+ navigationOptions : ( ) => TabOptions ( '我的' , MainIcon , MainIcon , '我的' ) ,
83+ } ,
84+ } , {
85+ tabBarPosition :'bottom' , // 设置tabbar的位置，iOS默认在底部，安卓默认在顶部。（属性值：'top'，'bottom')
86+ swipeEnabled :false , // 是否允许在标签之间进行滑动。
87+ animationEnabled : false , // 是否在更改标签时显示动画。
88+ lazy :true , // 是否根据需要懒惰呈现标签，而不是提前制作，意思是在app打开的时候将底部标签栏全部加载，默认false,推荐改成true哦。
89+ initialRouteName :'' , // 设置默认的页面组件
90+ backBehavior :'none' , // 按 back 键是否跳转到第一个Tab(首页)， none 为不跳转
91+ tabBarOptions :{
92+ // iOS属性
93+
94+ // activeTintColor:'', // label和icon的前景色 活跃状态下（选中）。
95+ // activeBackgroundColor:'', //label和icon的背景色 活跃状态下（选中） 。
96+ // inactiveTintColor:'', // label和icon的前景色 不活跃状态下(未选中)。
97+ // inactiveBackgroundColor:'', // label和icon的背景色 不活跃状态下（未选中）。
98+ showLabel :true , // 是否显示label，默认开启。
99+ // style:{}, // tabbar的样式。
100+ // labelStyle:{}, //label的样式。
101+
102+ // 安卓属性
103+
104+ // activeTintColor:'', // label和icon的前景色 活跃状态下（选中） 。
105+ // inactiveTintColor:'', // label和icon的前景色 不活跃状态下(未选中)。
106+ showIcon :true , // 是否显示图标，默认关闭。
107+ // showLabel:true, //是否显示label，默认开启。
108+ // style:{}, // tabbar的样式。
109+ // labelStyle:{}, // label的样式。
110+ upperCaseLabel :false , // 是否使标签大写，默认为true。
111+ // pressColor:'', // material涟漪效果的颜色（安卓版本需要大于5.0）。
112+ // pressOpacity:'', // 按压标签的透明度变化（安卓版本需要小于5.0）。
113+ // scrollEnabled:false, // 是否启用可滚动选项卡。
114+ // tabStyle:{}, // tab的样式。
115+ // indicatorStyle:{}, // 标签指示器的样式对象（选项卡底部的行）。安卓底部会多出一条线，可以将height设置为0来暂时解决这个问题。
116+ // labelStyle:{}, // label的样式。
117+ // iconStyle:{}, // 图标的样式。
118+ }
119+
120+ } ) ;
121+
122+ // 初始化StackNavigator
123+ const MyNav = StackNavigator ( {
124+ // 将TabNavigator包裹在StackNavigator里面可以保证跳转页面的时候隐藏tabbar
125+ MyTab :{
126+ screen :MyTab ,
127+ } ,
128+ // 将需要跳转的页面注册在这里，全局才可以跳转
129+ Detail1 :{
130+ screen :Detail1
131+ } ,
132+ Detail2 :{
133+ screen :Detail2 ,
134+ }
135+ } ) ;
136+
137+ const TabOptions = ( tabBarTitle , normalImage , selectedImage , navTitle ) => {
138+ // console.log(navigation);
139+ const tabBarLabel = tabBarTitle ;
140+ const tabBarIcon = ( ( { tintColor, focused} ) => {
141+ return (
142+ < Image
143+ source = { ! focused ? normalImage : selectedImage }
144+ style = { [ { height :35 , width :35 } , { tintColor : tintColor } ] }
145+ />
146+ )
147+ } ) ;
148+ const headerTitle = navTitle ;
149+ const headerTitleStyle = { fontSize :22 , color :'white' , alignSelf :'center' } ;
150+ // header的style
151+ const headerStyle = { backgroundColor :'#4ECBFC' } ;
152+ const tabBarVisible = true ;
153+ // const header = null;
154+ return { tabBarLabel, tabBarIcon, headerTitle, headerTitleStyle, headerStyle, tabBarVisible} ;
155+ } ;
156+
157+ export default MyNav ;
0 commit comments