React Native學(xué)習(xí)之路(7) - Rect-Navigation導(dǎo)航器（全）+ (Rect-Native-vector-Icons ) + (Rect-Navtive-swiper)

React-Navigation包含三類組件：

  • (1) StackNavigator：用來跳轉(zhuǎn)頁面和傳遞參數(shù) (stack是堆疊的意思，頁面一層層堆疊)
  • (2) TabNavigator：底部導(dǎo)航欄，用來在同一屏幕下切換不同界面
  • (3) DrawerNavigator：側(cè)滑導(dǎo)航欄，用于輕松設(shè)置帶抽屜導(dǎo)航的屏幕

(1) TabNavigator的使用：

  • (1) 安裝react-navigation
npm install react-navigation ---save
  • (2) 引入TabNavigator
import { TabNavigator } from 'react-navigation';
  • (3)TabNavigator的使用
const TabContainer = TabNavigator(
    {
        // 所要展示的組件
    },
    {
        // 配置項(xiàng)
    }
)

http://www.itdecent.cn/p/0ad6c348157a
http://www.itdecent.cn/p/7d435e199c96
http://blog.csdn.net/xiangzhihong8/article/details/71249167?ref=myread
（stackNavigator傳值必看）http://www.itdecent.cn/p/2af7b9a599ea
http://blog.csdn.net/sinat_17775997/article/details/66972413
http://www.itdecent.cn/p/c24dfe7831c1
示例代碼：

var App= TabNavigator({
          Home:{
              screen: HomePage,
              navigationOptions:{
                tabBarLabel: '主頁',
                tabBarIcon: ( { tintColor} ) => (
                      <Icon name="home" size={ 30 } color={ tintColor }></Icon>
                 )，
               tabBarVisible: true    //tatBar是否可見，當(dāng)為false時，點(diǎn)擊會隱藏    
              }
          }
},{
    animationEnabled:true, //切換頁面時，是否有動畫效果
    swipeEnabled: true, //是否可以滑動切換Tab,滑動切換效果
    backBehavior: 'none' //按Back鍵是否跳轉(zhuǎn)到第一個tab(首頁)，none為不跳轉(zhuǎn)  （behavior是行為的意思）
    lazy: true   //是否根據(jù)需要懶惰呈現(xiàn)標(biāo)簽，而不是提前，意思是在app打開的時候?qū)⒌撞繕?biāo)簽欄全部加載，默認(rèn)false,推薦為true
    initialRouteName: 'Home'  //第一次進(jìn)入的界面

    tabBarPosition: 'bottom', //設(shè)置tabBar的位置，ios默認(rèn)在底部，android默認(rèn)在頂部。（屬性值：'top'，'bottom'）
    tabBarOptions: {  //配置標(biāo)簽欄的一些屬性(底部標(biāo)簽欄)
        indicatorStyle:{ height:0 },  //標(biāo)簽指示器的樣式對象（選項(xiàng)卡底部的行）。(indicator是指示器的意思)安卓底部會多出一條線，可以將height設(shè)置為0來暫時解決這個問題。
        activeTintColor: '#ff7454', // 文字和圖片選中顏色  (tint是上色的意思)
        inactiveTintColor: '#333', // 文字和圖片未選中顏色
        showIcon: true, //TabBar圖標(biāo)是否顯示，默認(rèn)不顯示，需要設(shè)置true才會顯示
        showLabel: true,//TabBar文字是否顯示，默認(rèn)顯示。
        style: { backgroundColor: 'white'},  //底部TabBar的樣式
        tabStyle:{ backgroundColor: '...'}
        labelStyle: { fontSize: 14 }, //底部TabBar文字大小
        iconStyle: { width:30, height:30},
        scrollEnabled: false //是否啟用可滾動選項(xiàng)卡 tabStyle：tab的樣式
    }
})
  • (4)tabNavigator怎么更換不同的圖片（實(shí)際開發(fā)中ui會給到不同狀態(tài)下的icon）
    Home: {
        screen: Home,  //對應(yīng)的界面的名稱（組件名稱）
            navigationOptions:{   // 也可以寫在組件的static navigationOptions內(nèi)
            tabBarLabel: '主頁',
            tabBarIcon: ( { tintColor, focused } ) => (
                focused ?
                <Icon3 name="ios-home" size={36} color={tintColor}></Icon3>
                :
                <Icon name="home" size={34} color={tintColor}></Icon>
             )
        }
    }

(2) StackNavigator的使用

  • (1) 引入StackNavigator
import { StackNavigator } from 'react-navigation';

const Go = StackNavigator({
    Index: {
        screen: App,    //導(dǎo)航的頁面
        navigationOptions:{
            header:null   // 沒有頂部欄
        }
    },
    ListDetail: {
        screen: HomeDetail
    }
},{
    navigationOptions: {
        headerTitle: '返回',    //頂部欄的文字
        headerStyle:{
            height:50,        //頂部欄的高度
            backgroundColor: '#ff7454'
        },
       cardStack:{
            gesturesEnabled: true    //允許手勢滑動
       }
    },
    mode: 'card',
    headerMode: 'screen'   // 導(dǎo)航欄的顯示模式, screen: 有漸變透明效果, float: 無透明效果, none: 隱藏導(dǎo)航欄
});
  • (3) 使android的stackNavigator文字居中（ 安卓默認(rèn)在左邊，ios默認(rèn)居中 ）
(1)
-
在navigationOptions中設(shè)置headerTitleStyle的alignSelf為 ' center '即可解決。
-
static navigationOptions = ({navigation}) => ({
        headerTitle: '視頻頁',
        headerStyle:{
            backgroundColor:'white',
        },
        headerTitleStyle:{
            alignSelf:'center'
        }
    })
效果圖

(番外篇：代碼中用到了react-native-vector-icons所以這里插入講解一下該矢量圖標(biāo)庫的使用)

(3) react-native-vector-icons的使用(for安卓)：

  • (1) 安裝react-native-vector-icons
npm install react-native-vector-icons --save  (安裝時記得關(guān)掉服務(wù)器，這里有坑)
  • (2) 安卓rnpm
npm install rnpm -g
  • (3)鏈接rnpm
rnpm link
  • (4) 拷貝Fonts
把 node_modules/react-native-vector-icons/Fonts 目錄下字體文件全部拷到 
android/app/src/main/assets/fonts目錄 (注意fonts要小寫，這里有坑，沒有就自己建)
  • (5) 在項(xiàng)目根目錄中執(zhí)行 react-native run-android
  • (6) 引入圖標(biāo)
import Icon from 'react-native-vector-icons/FontAwesome';
import Icon2 from 'react-native-vector-icons/Ionicons';
  • (6) 使用圖標(biāo)
案例1
<Icon name="rocket" size={30} color="#900" />

案例2
YangSheng: {
      screen: YangSheng, //對應(yīng)的界面的名稱（組件名稱）
      navigationOptions:{   // 也可以寫在組件的static navigationOptions內(nèi)
        tabBarLabel: '養(yǎng)生圈',
        tabBarIcon: ( { tintColor } ) => (
            <Icon2 name="statusnet" size={34} color={tintColor} />
            )
      }
    }

(番外篇：輪播圖組件)

(4) react-native-swiper 輪播組件

  • (1) 安裝
npm install react-native-swiper --save
  • (2) 引入
import Swiper from 'react-native-swiper';

render() {
        if(this.state.swiperShow){
            return(
                <View>
                    <Swiper height={ 300 }    //高度
                            showsButtons={false}  //顯示左右箭頭
                            autoplay={true}   //頁面自動跳轉(zhuǎn)
                            autoplayTimeout={ 2.5 }   //設(shè)置每個頁面自動滑動的停留時間
                            autoplayDirection={ true }  //允許控制圓點(diǎn)的方向
                            index = { 1 }    //從第幾頁開始播放
                            showsPagination={ true }  //顯示小圓點(diǎn)，(pagination是頁碼的意思)
                            paginationStyle={{ position:'absolute',bottom:10}}
                            activeDotStyle={{backgroundColor:'#ff7454', width: 10, height: 10}}
                            horizontal={ true }   //滾動的內(nèi)容橫向排列
                    >
                        <View style={styles.win}>
                            <Image source={ require('../8.jpg')}  style={styles.img}/>
                        </View>
                        <View style={styles.win}>
                            <Image source={ require('../10.jpg')} style={styles.img2} />
                        </View>
                        <View style={styles.win}>
                            <Image source={ require('../8.jpg')}  style={styles.img}/>
                        </View>

                    </Swiper>
                </View>
            )
        }else {
            return (
                <View style={{height:200}}>
                    <Image source={ require('../8.jpg')}  />
                </View>
            );
        }
    }
}

 img2: {
        width: width,
        height:300,
        resizeMode: 'stretch'
    }
效果圖

QQ截圖20170718232441.png
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • React Native優(yōu)秀博客，以及優(yōu)秀的Github庫列表（很多英文資料源自于[awesome-react-n...
    董董董董董董董董董大笨蛋閱讀 11,008評論 4贊 162
  • 簡短說明 收錄一些好用的RN第三方組件，以方便日常的使用，大家有什么推薦的也可以跟我說，我加進(jìn)去。如有冒犯，可以聯(lián)...
    以德扶人閱讀 43,902評論 44贊 214
  • 持續(xù)更新中...... 一套企業(yè)級的 UI 設(shè)計(jì)語言和 React 實(shí)現(xiàn)。 https://mobile.ant....
    日不落000閱讀 6,062評論 0贊 35
  • 許是源于你昨天的那兩聲咳，于是夢里的你好似不舒服，隱約我是在看一個“同鄉(xiāng)會”，扎著小辮子的大叔彈唱著一首陌生的歌曲...
    曉詠閱讀 345評論 0贊 0
  • 綠水待寒森，清風(fēng)洗遠(yuǎn)塵。 八方誰看望，四野怎聽聞。 碗里饈重續(xù)，杯中酒再斟。 雖為他處客，亦是故鄉(xiāng)人。
    點(diǎn)下閱讀 183評論 2贊 6

友情鏈接更多精彩內(nèi)容