一 .react-navigation包含以下功能來幫助你建立導航器:

• StackNavigator : 一次只渲染一個頁面，並提供頁面之間跳轉的方法。 當開啟一個新的頁面時，它被放置
• TabNavigator : 渲染一個選項卡，讓使用者可以在幾個頁面之間切換
• DrawerNavigator : 提供一個從螢幕左側滑入的抽屜

二.圖片與程式碼實現

1.StackNavigator

StackNavigator 實現如下：

（1）yarn add react-navigation （2）程式碼：

import React , {Component} from 'react';
import {View , Text , Button } from 'react-native';
import {StackNavigator} from 'react-navigation';

//新增頁面HomeScreen
//用一個navigator註冊一個元件時，這個元件將會新增一個屬性 navigation 。 這個屬效能夠控制不同頁面間的跳轉。
const HomeScreen=({navigation})=>(
  <View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
    <Text>Home Screen</Text>
    <Button onPress={()=>navigation.navigate('Details')} title="Go to Details" />
  </View>
)
//新增頁面DetailsScreen
const DetailsScreen=()=>(
  <View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
    <Text>Detail Screen</Text>
  </View>
)
//建立navigator
const RootNavigator=StackNavigator({
  //每個key代表一個頁面
  Home:{
    screen:HomeScreen,
    //為導航欄新增標題
    navigationOptions:{
      headerTitle:'Home',
    }
  },
  Details:{
    screen:DetailsScreen,
    navigationOptions:{
      headerTitle:'Details',
    },
  },

});

export default RootNavigator;
 

2.TabNavigator

TabNavigator實現如下

（1）yarn add TabNavigator , yarn add react-native-vector-icons （2）程式碼：

import React , { Component } from 'react';
import {View , Text , Button ,StyleSheet} from 'react-native'
//匯入TabNavigator
import {TabNavigator} from 'react-navigation'             //要先在根目錄下 yarn add react-navigation
import Ionicons from 'react-native-vector-icons/Ionicons'; // 要先在根目錄下 yarn add react-native-vector-icons

//建立頁面HomeScreen , DetailsScreen
const HomeScreen=()=>(
  <View style={{flex:1,alignItems:'center',justifyContent:'center'}} >
    <Text>Home Screen</Text>

  </View>
)
const DetailsScreen=()=>(
  <View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
    <Text>Details Screen </Text>
  </View>
)
//建立一個TabNavigator 名為RootTabs
const RootTabs=TabNavigator({
  Home:{
    screen:HomeScreen,
    navigationOptions:{
      tabBarLabel:'Home',
      //設定一個tabBarIcon,會預設在IOS上顯示,如果只在android上執行，可以忽略
      tabBarIcon:({ tintColor, focused })=>(
        <IonIcons
          name={focused?'ios-person':'ios-persion-outline'}
          size={26}
          style={{color:tintColor}}
        />
      ),
    },
  },
  Details:{
    screen:DetailsScreen,
    navigationOtions:{
      tabBarLabel:'Details',
      //設定一個tabBarIcon,會預設在IOS上顯示,如果只在android上執行，可以忽略
      tabBarIcon:({ tintColor, focused })=>(
        <IonIcons
          name={focused?'ios-person':'ios-persion-outline'}
          size={26}
          style={{color:tintColor}}
        />
      ),
    },
  },
});
export default RootTabs;
 

3.DrawerNavigator

DrawerNavigator實現如下

（1）yarn add TabNavigator , yarn add react-native-vector-icons （2）程式碼：

import {View ,Text } from 'react-native';
//匯入DrawerNavigator元件
import {DrawerNavigator} from 'react-navigation';
import Ionicons from 'react-native-vector-icons/Ionicons';

//建立頁面
const HomeScreen = () =>(
  <View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
    <Text>Home Screen</Text>
    <Text>向右拉出選單</Text>
  </View>
)
const DetailsScreen = () =>(
  <View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
    <Text>Details Screen</Text>
    <Text>向右拉出選單</Text>
  </View>
)
//建立一個名為RootDrawer元件
const RootDrawer=DrawerNavigator({
  Home:{
    screen:HomeScreen,
    //給每個DrawerItem設定一個明確的標籤和圖示
    navigationOptions:{
      drawerLabel:'Home',
      drawerIcon:({tintColor,focused})=>(
        <Ionicons
          name={focused?'ios-person':'ios-person-outline'}
          size={20}
          style={{color:tintColor}}
        />
      ),
    },

  },
  Details:{
    screen:DetailsScreen,
    navigationOptions:{
      drawerLabel:'Detail',
      drawerIcon:({tintColor,focused})=>(
        <Ionicons
          name={focused?'ios-person':'ios-person-outline'}
          size={20}
          style={{color:tintColor}}
        />
      ),
    },
  },
})
export default RootDrawer;
 

三.結語

本人RN新手小白一枚，希望結識志同道合可以互相騷擾的前端朋友，最好是女生，不然我男票要吃醋，哈哈哈哈