您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)React Native中頂|底部導(dǎo)航使用小技巧有哪些的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
導(dǎo)航一直是App開發(fā)中比較重要的一個組件,ReactNative提供了兩種導(dǎo)航組件供我們使用,分別是:NavigatorIOS和Navigator,但是前者只能用于iOS平臺,后者在ReactNative0.44版本以后已經(jīng)被移除了。
好在有人提供了更好的導(dǎo)航組件,就是我們今天要講的react-navigation,并且ReactNative官方更推薦我們使用此組件。
簡介
react-navigation主要包括導(dǎo)航,底部tab,頂部tab,側(cè)滑等,分別為:
導(dǎo)航 -> StackNavigator
底部或者頂部tab -> TabNavigator
側(cè)滑 -> DrawerNavigator
我們今天主要講TabNavigator。
效果展示
實現(xiàn)代碼
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Button, Text, View, Image, StatusBar } from 'react-native'; import { StackNavigator, TabBarBottom, TabNavigator } from "react-navigation"; class Home extends React.Component { static navigationOptions = { tabBarLabel: '熱點', tabBarIcon: ({ focused, tintColor }) => ( <Image source={focused ? require('../res/images/hot_hover.png') : require('../res/images/hot.png')} style={{ width: 26, height: 26, tintColor: tintColor }} /> ) }; render() { return ( <View style={styles.container}> <Text>!這是熱點</Text> </View> ); } } class Circle extends React.Component { static navigationOptions = { tabBarLabel: '圈子', tabBarIcon: ({ focused, tintColor }) => ( <Image source={focused ? require('../res/images/coterie.png') : require('../res/images/coterie.png')} style={{ width: 26, height: 26, tintColor: tintColor }} /> ) }; render() { return ( <View style={styles.container}> <Text>!這是圈子</Text> </View> ); } } class Tools extends React.Component { static navigationOptions = { tabBarLabel: '工具', tabBarIcon: ({ focused, tintColor }) => ( <Image source={focused ? require('../res/images/tool.png') : require('../res/images/tool.png')} style={{ width: 26, height: 26, tintColor: tintColor }} /> ) }; render() { return ( <View style={styles.container}> <Text>!這是工具</Text> </View> ); } } class Mypage extends React.Component { static navigationOptions = { tabBarLabel: '我的', tabBarIcon: ({ focused, tintColor }) => ( <Image source={focused ? require('../res/images/my_hover.png') : require('../res/images/my.png')} style={{ width: 26, height: 26, tintColor: tintColor }} /> ) }; render() { return ( <View style={styles.container}> <Text>!這是我的</Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#fff', } }); const MyApp = TabNavigator( { Home: { screen: Home, }, Circle: { screen: Circle, }, Tools: { screen: Tools, }, Mypage: { screen: Mypage, }, }, { tabBarOptions: { activeTintColor: '#4BC1D2', inactiveTintColor: '#000', showIcon: true, showLabel: true, upperCaseLabel: false, pressColor: '#823453', pressOpacity: 0.8, style: { backgroundColor: '#fff', paddingBottom: 0, borderTopWidth: 0.5, borderTopColor: '#ccc', }, labelStyle: { fontSize: 12, margin: 1 }, indicatorStyle: { height: 0 }, //android 中TabBar下面會顯示一條線,高度設(shè)為 0 后就不顯示線了 }, tabBarPosition: 'bottom', swipeEnabled: false, animationEnabled: false, lazy: true, backBehavior: 'none', }); module.exports = MyApp;
配置說明
NavigationOptions
當(dāng)然,通過NavigationOptions來配置我們的tabBarItem:
title - 標(biāo)題
tabBarVisible - 是否可見
tabBarIcon - 配置圖片,當(dāng)然,完全可以不使用圖片
tabBarLabel - 也是配置標(biāo)題,只不過title既能配置tab的標(biāo)題,也能配置navigation的標(biāo)題
TabNavigatorConfig
tabBarComponent- 用作標(biāo)簽欄的組件,例如 (這是iOS上的默認(rèn)設(shè)置), (這是Android上的默認(rèn)設(shè)置)TabBarBottomTabBarTop
tabBarPosition- 標(biāo)簽欄的位置可以是或'top''bottom'
swipeEnabled - 是否允許在標(biāo)簽之間進(jìn)行滑動
animationEnabled - 是否在更改標(biāo)簽時動畫
lazy - 是否根據(jù)需要懶惰呈現(xiàn)標(biāo)簽,而不是提前制作
tabBarOptions - 配置標(biāo)簽欄,如下所示。
幾個選項被傳遞到底層路由器來修改導(dǎo)航邏輯:
initialRouteName - 首次加載時初始標(biāo)簽路由的routeName
order - 定義選項卡順序的routeNames數(shù)組
paths - 將routeName映射到路徑配置,該配置將覆蓋routeConfigs中設(shè)置的路徑。
backBehavior - 后退按鈕是否會使Tab鍵切換到初始選項卡?如果是,否則設(shè)置。默認(rèn)為行為。initialRoutenoneinitialRoute
tabBarOptions for (iOS上的默認(rèn)標(biāo)簽欄)TabBarBottom
activeTintColor - 活動標(biāo)簽的標(biāo)簽和圖標(biāo)顏色
activeBackgroundColor - 活動選項卡的背景顏色
inactiveTintColor - 非活動標(biāo)簽的標(biāo)簽和圖標(biāo)顏色
inactiveBackgroundColor - 非活動標(biāo)簽的背景顏色
showLabel - 是否顯示標(biāo)簽的標(biāo)簽,默認(rèn)為true
style - 標(biāo)簽欄的樣式對象
labelStyle - 標(biāo)簽標(biāo)簽的樣式對象
tabStyle - 標(biāo)簽的樣式對象
tabBarOptions for (Android上的默認(rèn)標(biāo)簽欄)TabBarTop
activeTintColor - 活動標(biāo)簽的標(biāo)簽和圖標(biāo)顏色
inactiveTintColor - 非活動標(biāo)簽的標(biāo)簽和圖標(biāo)顏色
showIcon - 是否顯示標(biāo)簽的圖標(biāo),默認(rèn)值為false
showLabel - 是否顯示標(biāo)簽的標(biāo)簽,默認(rèn)為true
upperCaseLabel - 是否使標(biāo)簽大寫,默認(rèn)為true
pressColor - 材質(zhì)波紋顏色(Android> = 5.0)
pressOpacity - 按壓標(biāo)簽的不透明度(iOS和Android <5.0 only)
scrollEnabled - 是否啟用可滾動選項卡
tabStyle - 標(biāo)簽的樣式對象
indicatorStyle - 標(biāo)簽指示器的樣式對象(選項卡底部的行)
labelStyle - 標(biāo)簽標(biāo)簽的樣式對象
iconStyle - 標(biāo)簽圖標(biāo)的樣式對象
style - 標(biāo)簽欄的樣式對象
小技巧
1.去掉安卓下的下劃線,設(shè)置:tabBarOptions => indicatorStyle:{ height: 0 };
2.底部導(dǎo)航在導(dǎo)航最上方添加一條分割線,設(shè)置:tabBarOptions => style => borderTopWidth: 0.5, borderTopColor: '#ccc';
3.導(dǎo)航安卓圖標(biāo)和文字間隙比較大,手動調(diào)整小設(shè)置:tabBarOptions => labelStyle => margin: 0;
感謝各位的閱讀!關(guān)于“React Native中頂|底部導(dǎo)航使用小技巧有哪些”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。