在rn学习中路由是困扰我很长时间的，开始没有redux的时候，使用原生的组件可以完成任务，但是在redux掺和进来以后，我有点搞不清头绪，尽管有网友说组件导航和redux是没有关系的，理论上我是知道的，但是始终转不过弯。开始使用react-native-router-flux组件以后，开始有了一点认识。在学习snowflake这个模板代码的时候，才算是知道是怎么回事了。这里结合我自己的代码完成一下tabbar导航的任务。
react-native-redux-flux github地址
看图
ScreenFlow.gif
共有五个组件，四个是在tabbar中，另外一个作为页面之前的导航简介，和学习(1)的代码是一样的。
五个组件基本都是在初始化rn项目的 index.ios.js基础上修改了文本的颜色，所以很简单。
看一下代码
import React from 'react'
import {
AppRegistry,
StyleSheet,
View,
Text } from 'react-native'
//下面导入导航组件，router是最父组件包裹所有的组件
import {
Router,
Scene} from 'react-native-router-flux';
import { Provider } from 'react-redux';
import configureStore from './store/configureStore'; //redux的store
//下面导入需要注册的组件，经过container包装或没有包装都可以使用
import App from './containers/App'; //container包装的组件
import Red from './components/Red'; //没有包装的组件
import Blue from './components/Blue';
import Purple from './components/Purple';
import SubView from './components/SubView';
//导入字体图标
import Icon from 'react-native-vector-icons/FontAwesome'
const store = configureStore();//实例化Store
//下面ICON组件 ，改变选中/未选中的图标颜色
class TabIcon extends React.Component {
render () {
var color = this.props.selected ? '#3e92cf' : '#6577cc'
return (
<View style={{flex: 1, flexDirection: 'column', alignItems: 'center', alignSelf: 'center'}}>
<Icon style={{color: color}} name={this.props.iconName} size={30} />
<Text style={{color: color}}>{this.props.title}</Text>
</View>
)
}
}
const Root = () => (
<Provider store={store}>
<Router sceneStyle={{ backgroundColor: 'white' }}>
//标示Tabbar的Scene
<Scene key='Tabbar'
tabs //默认是true
hideNavBar={true} //隐藏导航栏
tabBarStyle={styles.tabBar}
default='Lamp'>
<Scene key='Lamp' //下面是tabbar中的四个组件
title={'Lamp'}
icon={TabIcon}
iconName={'apple'} //icon的名字
hideNavBar
component={App} />
<Scene key='Main' //这的key是关键，会在组件里注册，之后全局都可以根据这个key导航的对应的组件
title={'Red'}
iconName={'home'}
icon={TabIcon}
hideNavBar
component={Red}
initial /> //默认选中的组件，打开时显示这个一个
<Scene key='Blue'
title={'Blue'}
icon={TabIcon}
iconName={'gear'}
hideNavBar
component={Blue} />
<Scene key='Purple'
title={'Purple'}
icon={TabIcon}
iconName={'bus'}
hideNavBar
component={Purple} />
</Scene>
//下面是页面内导航的组件，要放在这里，放在tabbar之前就
// 显示它，可以试着放到最前面
<Scene key='SubView'
hideNavBar={false}
component={SubView} />
</Router>
</Provider>
);
const styles = StyleSheet.create({
tabBar: {
height: 70 //tabbar的高度
}
})
export default Root;
下面在看看页面内的导航
//Red.js
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import { Button } from 'react-native-elements';//导入了elements组件库
import {Actions} from 'react-native-router-flux' //导航的动作
export default class Red extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to Red component!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
<Button
small
rasie
title='GOTO SubView'
onPress={Actions.SubView} /> //导航动作.key就可以导航到对应的组件了，这里的key是在上面的代码router中注册过的。
</View>
);
}
}
const styles = StyleSheet.create({ //样式代码省略 });
跟着我示例代码走，其实原理就很清楚了，router-flux的导航其实是独立的，唯一要做的就是需要在router中进行一下注册。router-flux就会接管组件之间的跳转工作。所有的工作都可以在component上完成，不会影响redux的工作。我这个示例是在另一个简单的redux教程中改的，
redux的代码没有变动就可以正常工作，所以react-native-router-flux是比较好的选择，再结合两个比较好的组件库(elements,nativebase) . react-native/redux/router-flux/elements(nativebase)这个组合就可以作为基本完整的模板框架了。
