在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)這個組合就可以作為基本完整的模板框架了。
