react-native-router-flux组件的学习(2)

在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)这个组合就可以作为基本完整的模板框架了。