欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解React Native頂|底部導(dǎo)航使用小技巧

 更新時(shí)間:2017年09月14日 09:05:21   作者:西安.王磊  
本篇文章主要介紹了詳解React Native頂|底部導(dǎo)航使用小技巧 ,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧

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

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

本篇文章只講解基礎(chǔ)用法,如果你想了解更多,請戳這里->戳我。

 簡介

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

  • 導(dǎo)航 -> StackNavigator
  • 底部或者頂部tab -> TabNavigator
  • 側(cè)滑 -> DrawerNavigator

我們今天主要講TabNavigator。

效果展示

 實(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下面會顯示一條線,高度設(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)簽時(shí)動畫
  • 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 - 后退按鈕是否會使Tab鍵切換到初始選項(xiàng)卡?如果是,否則設(shè)置。默認(rèn)為行為。initialRoutenoneinitialRoute

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

  • activeTintColor - 活動標(biāo)簽的標(biāo)簽和圖標(biāo)顏色
  • activeBackgroundColor - 活動選項(xiàng)卡的背景顏色
  • 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 - 是否啟用可滾動選項(xiàng)卡
  • tabStyle - 標(biāo)簽的樣式對象
  • indicatorStyle - 標(biāo)簽指示器的樣式對象(選項(xiàng)卡底部的行)
  • 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;

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評論