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

在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 (

{this.props.title}

)

}

}

const Root = () => (

//标示Tabbar的Scene

tabs //默认是true

hideNavBar={true} //隐藏导航栏

tabBarStyle={styles.tabBar}

default='Lamp'>

title={'Lamp'}

icon={TabIcon}

iconName={'apple'} //icon的名字

hideNavBar

component={App} />

title={'Red'}

iconName={'home'}

icon={TabIcon}

hideNavBar

component={Red}

initial /> //默认选中的组件，打开时显示这个一个

title={'Blue'}

icon={TabIcon}

iconName={'gear'}

hideNavBar

component={Blue} />

title={'Purple'}

icon={TabIcon}

iconName={'bus'}

hideNavBar

component={Purple} />

//下面是页面内导航的组件，要放在这里，放在tabbar之前就

// 显示它，可以试着放到最前面

hideNavBar={false}

component={SubView} />

);

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 (

Welcome to Red component!

To get started, edit index.ios.js

Press Cmd+R to reload,{'\n'}

Cmd+D or shake for dev menu

small

rasie

title='GOTO SubView'

onPress={Actions.SubView} /> //导航动作.key就可以导航到对应的组件了，这里的key是在上面的代码router中注册过的。

);

}

}

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