之前兩篇文章介紹了怎么使用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
二仁期、項(xiàng)目目錄結(jié)構(gòu)
如圖：
QQ20170821-144820.png
三、redux集成
(一)入口文件
入口文件分為index.ios.js和index.android.js懂盐，因?yàn)槲覀円褂猛瑯拥拇a顯示在不同平臺(tái)褥赊，所以入口文件的代碼都是一樣的，即：
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文件夾中定義一個(gè)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: '首頁(yè)',
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 才會(huì)顯示
indicatorStyle: {
height: 0
}, // android 中TabBar下面會(huì)顯示一條線，高度設(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', // 初始化哪個(gè)界面為根界面
mode:'card', // 跳轉(zhuǎn)方式：默認(rèn)的card烁涌，在iOS上是從右到左跳轉(zhuǎn)，在Android上是從下到上酒觅，都是使用原生系統(tǒng)的默認(rèn)跳轉(zhuǎn)方式。
headerMode:'screen', // 導(dǎo)航條動(dòng)畫效果：float表示會(huì)漸變捆愁，類似于iOS的原生效果槐臀，screen表示沒有漸變痹籍。none表示隱藏導(dǎo)航條
};
const AppNavigator = StackNavigator(StackRouteConfigs, StackNavigatorConfigs);
export {
AppNavigator
};
(二)新建app.js
在這個(gè)js中，引入上面文件中導(dǎo)出的AppNavigator颜凯。
...
import {AppNavigator} from '../constants/routers';
...
render() {
return (
<AppNavigator/>
);
}
export default App;
(三)編寫界面
我們?cè)趓outers.js的StackNavigatorConfigs中，配置了initialRouteName: 'Splash'仗扬，意味著我們這個(gè)app啟動(dòng)默認(rèn)加載的閃屏界面症概，我們需要將routers.js中配置的界面一一寫出即可。
(四)其他
關(guān)于自定義navigationBar早芭、界面跳轉(zhuǎn)彼城、傳值、回退以及切換tabBar事件退个，在前兩篇文章中都有介紹募壕，不清楚的請(qǐng)自行查看前兩篇文章，在這里就不贅述了~
這樣我們r(jià)edux和navigation集成语盈，就搞完了舱馅！來個(gè)動(dòng)態(tài)效果圖吧！
sybil052-20170821-161248.gif
sybil052-20170821-163733.gif
