ReactNative中頂|底部導(dǎo)航使用小技巧有哪些-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)React Native中頂|底部導(dǎo)航使用小技巧有哪些的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

站在用戶的角度思考問題，與客戶深入溝通，找到二道江網(wǎng)站設(shè)計(jì)與二道江網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：網(wǎng)站設(shè)計(jì)制作、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、申請(qǐng)域名、虛擬主機(jī)、企業(yè)郵箱。業(yè)務(wù)覆蓋二道江地區(qū)。

導(dǎo)航一直是App開發(fā)中比較重要的一個(gè)組件，ReactNative提供了兩種導(dǎo)航組件供我們使用，分別是：NavigatorIOS和Navigator，但是前者只能用于iOS平臺(tái)，后者在ReactNative0.44版本以后已經(jīng)被移除了。

好在有人提供了更好的導(dǎo)航組件，就是我們今天要講的react-navigation，并且ReactNative官方更推薦我們使用此組件。

 簡(jiǎn)介

react-navigation主要包括導(dǎo)航，底部tab，頂部tab，側(cè)滑等，分別為：

  • 導(dǎo)航 -> StackNavigator

  • 底部或者頂部tab -> TabNavigator

  • 側(cè)滑 -> DrawerNavigator

我們今天主要講TabNavigator。

效果展示

React Native中頂|底部導(dǎo)航使用小技巧有哪些

 實(shí)現(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: '熱點(diǎn)',
    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>！這是熱點(diǎn)</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下面會(huì)顯示一條線，高度設(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)行滑動(dòng)

  • animationEnabled - 是否在更改標(biāo)簽時(shí)動(dòng)畫

  • lazy - 是否根據(jù)需要懶惰呈現(xiàn)標(biāo)簽，而不是提前制作

  • tabBarOptions - 配置標(biāo)簽欄，如下所示。

  • 幾個(gè)選項(xiàng)被傳遞到底層路由器來修改導(dǎo)航邏輯：

  • initialRouteName - 首次加載時(shí)初始標(biāo)簽路由的routeName

  • order - 定義選項(xiàng)卡順序的routeNames數(shù)組

  • paths - 將routeName映射到路徑配置，該配置將覆蓋routeConfigs中設(shè)置的路徑。

  • backBehavior - 后退按鈕是否會(huì)使Tab鍵切換到初始選項(xiàng)卡？如果是，否則設(shè)置。默認(rèn)為行為。initialRoutenoneinitialRoute

tabBarOptions for （iOS上的默認(rèn)標(biāo)簽欄）TabBarBottom

  • activeTintColor - 活動(dòng)標(biāo)簽的標(biāo)簽和圖標(biāo)顏色

  • activeBackgroundColor - 活動(dòng)選項(xiàng)卡的背景顏色

  • inactiveTintColor - 非活動(dòng)標(biāo)簽的標(biāo)簽和圖標(biāo)顏色

  • inactiveBackgroundColor - 非活動(dòng)標(biāo)簽的背景顏色

  • showLabel - 是否顯示標(biāo)簽的標(biāo)簽，默認(rèn)為true

  • style - 標(biāo)簽欄的樣式對(duì)象

  • labelStyle - 標(biāo)簽標(biāo)簽的樣式對(duì)象

  • tabStyle - 標(biāo)簽的樣式對(duì)象

tabBarOptions for （Android上的默認(rèn)標(biāo)簽欄）TabBarTop

  • activeTintColor - 活動(dòng)標(biāo)簽的標(biāo)簽和圖標(biāo)顏色

  • inactiveTintColor - 非活動(dòng)標(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 - 是否啟用可滾動(dòng)選項(xiàng)卡

  • tabStyle - 標(biāo)簽的樣式對(duì)象

  • indicatorStyle - 標(biāo)簽指示器的樣式對(duì)象（選項(xiàng)卡底部的行）

  • labelStyle - 標(biāo)簽標(biāo)簽的樣式對(duì)象

  • iconStyle - 標(biāo)簽圖標(biāo)的樣式對(duì)象

  • style - 標(biāo)簽欄的樣式對(duì)象

小技巧

1.去掉安卓下的下劃線，設(shè)置：tabBarOptions => indicatorStyle:{ height: 0 }；

2.底部導(dǎo)航在導(dǎo)航最上方添加一條分割線，設(shè)置：tabBarOptions => style => borderTopWidth: 0.5, borderTopColor: '#ccc'；

3.導(dǎo)航安卓圖標(biāo)和文字間隙比較大，手動(dòng)調(diào)整小設(shè)置：tabBarOptions => labelStyle => margin: 0；

感謝各位的閱讀！關(guān)于“React Native中頂|底部導(dǎo)航使用小技巧有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

當(dāng)前標(biāo)題：ReactNative中頂|底部導(dǎo)航使用小技巧有哪些-創(chuàng)新互聯(lián)
標(biāo)題來源：http://muchs.cn/article0/dppjio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、微信小程序、標(biāo)簽優(yōu)化、企業(yè)建站、網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站制作