react-navigation 3.x 使用

 官網文檔：https://reactnavigation.org/docs/zh-Hans/getting-started.html

1、安裝react-navigation

yarn add react-navigation
# or with npm
# npm install --save react-navigation

2、安裝 react-native-gesture-handler。 如果你使用 Expo，就什麼都不需要做，他已經包含在 SDK 中 了

yarn add react-native-gesture-handler
# or with npm
# npm install --save react-native-gesture-handler

Link 所有的原生依賴

react-native link react-native-gesture-handler

iOS 啥都不用做

爲了完成 react-native-gesture-handler在 Android 上的安裝，請確保在 MainActivity.java 上完成如下修改：

import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

    ...

    @Override
    protected ReactActivityDelegate createReactActivityDelegate() {
        return new ReactActivityDelegate(this, getMainComponentName()) {
            @Override
            protected ReactRootView createRootView() {
                return new RNGestureHandlerEnabledRootView(MainActivity.this);
            }
        };
    }
}

 

 頂部導航

import { createStackNavigator, createAppContainer } from 'react-navigation'

const RootStack = createStackNavigator({})

const AppContainer = createAppContainer(RootStack); //與2.x不同，需要用到createAppContainer

export default class Navigation extends Component {
    render() {
        return (
            <AppContainer/> //2.x返回的是 <RootStack/>
        )
    }
}

 

頭部導航欄樣式屬性

路由的選項：

path：路由中設置的路徑的覆蓋映射配置

initialRouteName：設置 stack navigator 的默認頁面， 必須是路由配置中的某一個

initialRouteParams：初始路由參數

defaultNavigationOptions：用於屏幕的默認導航選項

視覺選項：

mode： 定義渲染和轉換的樣式

• card：使用標準的 iOS 和 Android 屏幕轉換， 這是默認設置
• modal：iOS獨有的使屏幕從底部畫出，在 Android 上無效

headerMode：返回上級頁面時動畫效果

• float：呈現一個位於頂部的單個頁眉, 並在屏幕被更改時進行動畫顯示， 這是 iOS 上常見的模式
• screen：每個屏幕都有一個標頭, 並且頁眉隨屏幕一起淡入和淡出， 這是 Android 的常見模式
• none：無動畫

用於導航器內部頁面的navigationOptions:

• header：可以設置一些導航的屬性，如果隱藏頂部導航欄只要將這個屬性設置爲null
• headerTitle：設置導航欄標題
• headerBackImage：在標題的後退按鈕中顯示自定義圖片
• headerBackTitle：設置跳轉頁面左側返回箭頭後面的文字，默認是上一個頁面的標題。可以自定義，也可以設置爲null
• headerTruncatedBackTitle：設置當上個頁面標題不符合返回箭頭後的文字時，默認改成"返回"
• headerRight：在標題欄右側展示的 React 組件
• headerLeft：在標題欄左側展示的 React 組件
• headerStyle：設置導航條的樣式。背景色，寬高等
• headerTitleStyle：設置導航欄文字樣式
• headerBackTitleStyle：設置導航欄‘返回’文字樣式
• headerLeftContainerStyle：自定義 headerLeft 組件容器的樣式，例如，增加 padding
• headerRightContainerStyle：自定義 headerRight 組件容器的樣式，例如，增加 padding
• headerTitleContainerStyle：自定義 headerTitle 組件容器的樣式，例如，增加 padding
• headerTintColor：設置導航欄顏色
• headerPressColorAndroid：安卓獨有的設置顏色紋理，需要安卓版本大於5.0
• headerTransparent：標頭背景是否透明
• headerBackground：將其與 headerTransparent 一起使用, 以提供要在標頭背景下呈現的組件
• gesturesEnabled：是否可以使用手勢關閉此頁面，iOS默認支持，安卓默認關閉    

 

底部導航樣式屬性

initialRouteName： 第一次加載時初始選項卡路由的 routeName

order：定義選項卡順序的 routeNames 數組

tabBarOptions

• activeTintColor：標籤和圖標選中顏色
• activeBackgroundColor：導航選中背景色
• inactiveTintColor：標籤和圖標未選中顏色
• inactiveBackgroundColor：導航未選中背景色
• showIcon：是否顯示 Tab 的圖標,默認不顯示
• style：選項卡欄的樣式對象
• labelStyle：選項卡標籤的樣式對象
• tabStyle：選項卡的樣式對象 

 

示例：

import React, { Component } from 'react'

import { createStackNavigator, createBottomTabNavigator, createAppContainer } from 'react-navigation'

import Home from './Home'
import Mine from './Mine'

const StackNavigator = createStackNavigator(
    {
        Home,
        Mine,
    },
    {
        initialRouteName: 'Home',
        defaultNavigationOptions: {
            headerStyle: {
                // backgroundColor: '#f4511e',
            },
            headerBackTitle: null,
            // headerTintColor: '#fff',
            headerTitleStyle: {
                fontWeight: 'bold',
            },
            header: null
        }
    }
)
const HomeStack = createStackNavigator({Home});
const MineStack = createStackNavigator({Mine});

const BottomTabNavigator = createBottomTabNavigator(
    {
        Home,
        Mine,
    },
    {
        initialRouteName: 'Home', //第一次加載時初始選項卡路由的 routeName
        order: ['Mine','Home'], //定義選項卡順序的 routeNames 數組
        tabBarOptions: {
            activeTintColor: 'red',//標籤和圖標選中顏色
            activeBackgroundColor: 'yellow',//導航選中背景色
            inactiveTintColor: '#000', //標籤和圖標未選中顏色
            inactiveBackgroundColor: 'white',//導航未選中背景色
            showIcon: true,//是否顯示 Tab 的圖標,默認不顯示
            style: {
                backgroundColor: 'yellow',//tabBar背景色
                height: 49
            },
            // labelStyle 選項卡標籤的樣式對象
            // tabStyle 選項卡的樣式對象
        },
    }
)

// const AppContainer = createAppContainer(StackNavigator); 頂部導航
const AppContainer = createAppContainer(BottomTabNavigator); //底部導航

export default class Navigation extends Component {
    render() {
        return (
            <AppContainer/>
        )
    }
}

還有一些不常用的屬性與樣式沒有用到，具體的可以查看官方：API

 

附加：帶有icon圖標的底部導航，用到了 nativebase 與 react-native-vector-icons

import React, { Component } from 'react';
import { createAppContainer, createBottomTabNavigator } from 'react-navigation'
import { Icon } from 'native-base';

import App from './App'
import Car from './Car'
import Camera from './Camera'
import Search from './Search'

const SELECTED_COLOR = 'white';
const UNSELECTED_COLOR = '#000';
const SELECTED_BGCOLOR = 'blue';
const UNSELECTED_BGCOLOR = 'deepskyblue';
const ORDER = ['App','Search','Camera','Car'];

export class TabBarIcon extends Component {
    render() {
        return(
            <Icon name={this.props.name}
                style={{
                    marginBottom: -5,
                    marginRight: 2,
                    fontSize: 24,
                    color: this.props.color,
                }}
            />
        )
    }
}
 
const BottomTabNavigator = createBottomTabNavigator(
    {
        App: {
            screen: App,
            navigationOptions: {
                tabBarLabel: '首頁',
                tabBarIcon:({focused}) => (
                    <TabBarIcon
                        focused={focused}
                        name={'apps'}
                        color={focused ? SELECTED_COLOR : UNSELECTED_COLOR}
                    />
                )
            }
        },
        Car: {
            screen: Car,
            navigationOptions: {
                tabBarLabel: '汽車',
                tabBarIcon:({focused}) => (
                    <TabBarIcon
                        focused={focused}
                        name={'car'}
                        color={focused ? SELECTED_COLOR : UNSELECTED_COLOR}
                    />
                )
            }
        },
        Camera: {
            screen: Camera,
            navigationOptions: {
                tabBarLabel: '相機',
                tabBarIcon:({focused}) => (
                    <TabBarIcon
                        focused={focused}
                        name={'camera'}
                        color={focused ? SELECTED_COLOR : UNSELECTED_COLOR}
                    />
                )
            }
        },
        Search: {
            screen: Search,
            navigationOptions: {
                tabBarLabel: '搜索',
                tabBarIcon:({focused}) => (
                    <TabBarIcon
                        focused={focused}
                        name={'search'}
                        color={focused ? SELECTED_COLOR : UNSELECTED_COLOR}
                    />
                )
            }
        }
    },
    {
        initialRouteName: 'App',
        order: ORDER,
        tabBarOptions: {
            activeTintColor: SELECTED_COLOR,
            activeBackgroundColor: SELECTED_BGCOLOR,
            inactiveTintColor: UNSELECTED_COLOR,
            inactiveBackgroundColor: UNSELECTED_BGCOLOR,
            style: {
                backgroundColor: 'pink',
            },
            labelStyle: {
                paddingBottom: 5,
                fontSize: 14,
            }
        }
    }
)
const AppContainer = createAppContainer(BottomTabNavigator); 

export default class FooterTabsExample extends Component {
    render() {
        return (
            <AppContainer/>
        )
    }
}

效果圖：