之前兩篇文章介紹了怎么使用StackNavigator和TabNavigator，而這篇文章將介紹如何兩者結(jié)合與redux集成到一起。

一、準(zhǔn)備工作

(一)安裝redux

使用命令

npm install --save redux
npm install --save react-redux
npm install --save redux-logger
npm install --save redux-thunk

(二)安裝react-navigation

使用命令

npm install --save react-navigation

或者

yarn add react-navigation

二、項目目錄結(jié)構(gòu)

如圖：

QQ20170821-144820.png

三、redux集成

(一)入口文件

入口文件分為index.ios.js和index.android.js，因為我們要使用同樣的代碼顯示在不同平臺，所以入口文件的代碼都是一樣的，即：

QQ20170821-145148.png

(二)在store文件夾新建store.js

代碼如下：

QQ20170821-150418.png

(三)新建reducer

在reducer文件夾中新建index.js

QQ20170821-151228.png

其中app和user是接收action，并改變狀態(tài)樹中的狀態(tài)的。

(四)新建action

在action中新建js，用來定義action，當(dāng)然我們還需要在constants文件夾中定義一個actionType，用來定義action的類型。

(五)新建root根文件

新建root文件，將store注入provider，代碼如下：

QQ20170821-150650.png

四、navigation集成

(一)新建routers

在constants文件夾下新建routers.js，用來聲明所有界面，配置相關(guān)屬性，代碼如下：

import React from 'react';
import {
    Image,
    StyleSheet
} from 'react-native';

import {
    TabNavigator,
    StackNavigator,
    TabBarBottom,
} from 'react-navigation';

import HomeRenderIcon from '../../assets/img/bar_home_nomarl.png';
import HomePressedIcon from '../../assets/img/bar_home_pressed.png';
import NearRenderIcon from '../../assets/img/bar_map_normal.png';
import NearPressedIcon from '../../assets/img/bar_map_pressed.png';
import OrderRenderIcon from '../../assets/img/bar_order_normal.png';
import OrderPressedIcon from '../../assets/img/bar_order_pressed.png';
import CenterRenderIcon from '../../assets/img/bar_center_normal.png';
import CenterPressedIcon from '../../assets/img/bar_center_pressed.png';

import Home from '../containers/home/home';
import Near from '../containers/near/near';
import Order from '../containers/order/order';
import Mine from '../containers/mine/mine';
import Splash from '../containers/app/splash';
import Login from '../containers/mine/login';
import Registered from '../containers/loginAbout/registered';
import ForgetPWD from '../containers/mine/forgetPWD';
import LoginSms from '../containers/mine/loginSms';

const styles = StyleSheet.create({
    tabIcon: {
        // height: 23,
        // width: 23,
        resizeMode: 'cover'
    }
});
const TabRouteConfigs = {
    Home: {
        screen: Home,
        navigationOptions: ({navigation}) => ({
            title: '首頁',
            tabBarIcon: ({focused, tintColor})=>(
                <Image
                    source={focused ? HomePressedIcon : HomeRenderIcon}
                    style={styles.tabIcon}
                />
            ),
        }),
    },
    Near: {
        screen: Near,
        navigationOptions: ({navigation}) => ({
            title: '附近',
            tabBarIcon: ({focused,tintColor})=>(
                <Image
                    source={focused ? NearPressedIcon : NearRenderIcon}
                    style={styles.tabIcon}
                />
            ),
        }),
    },
    Order: {
        screen: Order,
        navigationOptions: ({navigation}) => ({
            title: '訂單',
            tabBarIcon: ({focused,tintColor})=>(
                <Image
                    source={focused ? OrderPressedIcon : OrderRenderIcon}
                    style={styles.tabIcon}
                />
            ),
        }),
    },
    Mine: {
        screen: Mine,
        navigationOptions: ({navigation}) => ({
            title: '我的',
            tabBarIcon: ({focused,tintColor})=>(
                <Image
                    source={focused? CenterPressedIcon : CenterRenderIcon}
                    style={styles.tabIcon}
                />
            ),
        }),
    }
};
const TabNavigatorConfigs = {
    initialRouteName: 'Home',
    tabBarComponent: TabBarBottom,
    tabBarPosition: 'bottom',
    lazy: true,
    tabBarOptions: {
        activeTintColor: '#2562b4', // 文字和圖片選中顏色
        // inactiveTintColor: '#999999', // 文字和圖片默認(rèn)顏色
        showIcon: true, // android 默認(rèn)不顯示 icon, 需要設(shè)置為 true 才會顯示
        indicatorStyle: {
            height: 0
        }, // android 中TabBar下面會顯示一條線，高度設(shè)為 0 后就不顯示線了， 不知道還有沒有其它方法隱藏？？？
        style: {
            backgroundColor: '#FFFFFF', // TabBar 背景色
        },
        labelStyle: {
            fontSize: 11, // 文字大小
        },
    },
};

const TabBarNavigator = TabNavigator(TabRouteConfigs, TabNavigatorConfigs);

const StackRouteConfigs = {
    Splash: {
        screen: Splash,
        navigationOptions: {
            header: null
        }
    },
    Login: {
        screen: Login,
        navigationOptions: {
            header: null
        }
    },
    Main: {
        screen: TabBarNavigator,
        navigationOptions: {
            header: null
        }
    },
    Registered: {
        screen: Registered,
        navigationOptions: {
            header: null
        }
    },
    LoginSms: {
        screen: LoginSms,
        navigationOptions: {
            header: null
        }
    },
    ForgetPWD: {
        screen: ForgetPWD,
        navigationOptions: {
            header: null
        }
    } 
};
const StackNavigatorConfigs = {
    initialRouteName: 'Splash', // 初始化哪個界面為根界面
    mode:'card', // 跳轉(zhuǎn)方式：默認(rèn)的card，在iOS上是從右到左跳轉(zhuǎn)，在Android上是從下到上，都是使用原生系統(tǒng)的默認(rèn)跳轉(zhuǎn)方式。
    headerMode:'screen', // 導(dǎo)航條動畫效果：float表示會漸變，類似于iOS的原生效果，screen表示沒有漸變。none表示隱藏導(dǎo)航條
};

const AppNavigator = StackNavigator(StackRouteConfigs, StackNavigatorConfigs);

export {
    AppNavigator
};

(二)新建app.js

在這個js中，引入上面文件中導(dǎo)出的AppNavigator。

...
import {AppNavigator} from '../constants/routers';
    ...
    render() {
        return (
            <AppNavigator/>
        );
    }
export default App;

(三)編寫界面

我們在routers.js的StackNavigatorConfigs中，配置了initialRouteName: 'Splash'，意味著我們這個app啟動默認(rèn)加載的閃屏界面，我們需要將routers.js中配置的界面一一寫出即可。

(四)其他

關(guān)于自定義navigationBar、界面跳轉(zhuǎn)、傳值、回退以及切換tabBar事件，在前兩篇文章中都有介紹，不清楚的請自行查看前兩篇文章，在這里就不贅述了~
這樣我們redux和navigation集成，就搞完了！來個動態(tài)效果圖吧！

sybil052-20170821-161248.gif

sybil052-20170821-163733.gif