之前两篇文章介绍了怎么使用StackNavigator和TabNavigator，而这篇文章将介绍如何两者结合与redux集成到一起。
一、准备工作
(一)安装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
二、项目目录结构
如图：
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，并改变状态树中的状态的。
(四)新建action
在action中新建js，用来定义action，当然我们还需要在constants文件夹中定义一个actionType，用来定义action的类型。
(五)新建root根文件
新建root文件，将store注入provider，代码如下：
QQ20170821-150650.png
四、navigation集成
(一)新建routers
在constants文件夹下新建routers.js，用来声明所有界面，配置相关属性，代码如下：
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', // 文字和图片默认颜色
showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示
indicatorStyle: {
height: 0
}, // android 中TabBar下面会显示一条线，高度设为 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', // 跳转方式：默认的card，在iOS上是从右到左跳转，在Android上是从下到上，都是使用原生系统的默认跳转方式。
headerMode:'screen', // 导航条动画效果：float表示会渐变，类似于iOS的原生效果，screen表示没有渐变。none表示隐藏导航条
};
const AppNavigator = StackNavigator(StackRouteConfigs, StackNavigatorConfigs);
export {
AppNavigator
};
(二)新建app.js
在这个js中，引入上面文件中导出的AppNavigator。
...
import {AppNavigator} from '../constants/routers';
...
render() {
return (
<AppNavigator/>
);
}
export default App;
(三)编写界面
我们在routers.js的StackNavigatorConfigs中，配置了initialRouteName: 'Splash'，意味着我们这个app启动默认加载的闪屏界面，我们需要将routers.js中配置的界面一一写出即可。
(四)其他
关于自定义navigationBar、界面跳转、传值、回退以及切换tabBar事件，在前两篇文章中都有介绍，不清楚的请自行查看前两篇文章，在这里就不赘述了~
这样我们redux和navigation集成，就搞完了！来个动态效果图吧！
sybil052-20170821-161248.gif
sybil052-20170821-163733.gif
网友评论