接著上一篇【React-Native 開發(fā)篇一React-Native+Redux開發(fā)框架搭建】，本文記錄使用react-native-router-flux組件實(shí)現(xiàn)rn開發(fā)時(shí)最常見的底部導(dǎo)航菜單！

實(shí)現(xiàn)效果如下圖：

效果預(yù)覽

1.組件安裝

npm install react-native-router-flux --save

2.定義菜單圖標(biāo)及文字（tabIcon.js）

import React, { Component } from 'react';
import { View, Image, Text, StyleSheet,Dimensions } from 'react-native';
class TabIcon extends Component {
    constructor(props){
        super(props);       
    }

    render(){
        let selected=this.props.focused;
        let data={
            home:{
                title:"首頁",
                icon:!selected?require("../resource/images/home.png"):require("../resource/images/home_selected.png")
            },
            movies:{
                title:"電影",
                icon:!selected?require("../resource/images/movies.png"):require("../resource/images/movies_selected.png")
            },
            theaters:{
                title:"影院",
                icon:!selected?require("../resource/images/theater.png"):require("../resource/images/theater_selected.png")
            },
            me:{
                title:"我",
                icon:!selected?require("../resource/images/me.png"):require("../resource/images/me_selected.png")
            }
      }
      let param=data[this.props.navigation.state.key];
      return  <View style={styles.tabbarContainer}>
                <Image style={{ width: 25, height: 25,resizeMode:'contain' }} source={param.icon} />
                <Text style={[styles.tabbarItem,selected&&{color:'#F08519'}]}>{param.title}</Text>
              </View>
    }
}

const styles = StyleSheet.create({
    tabbarContainer:{
      flex:1,
      alignItems:"center",
      justifyContent:"center",
      width:Dimensions.get('window').width/4
    },
    tabbarItem:{  
      marginTop:5,    
      textAlign:"center"
    }
});

module.exports = TabIcon;

注意事項(xiàng)：

• 定義菜單標(biāo)題和圖標(biāo)的data數(shù)據(jù)的key（即例子中的home/movies/theaters/me）和步驟3中每一個(gè)Scene的key一一對(duì)應(yīng)；
• 判斷菜單是否被選中this.props.focused在老版本的react-native-router-flux使用this.props.selected;
• 取當(dāng)前菜單this.props.navigation.state.key在老版本的react-native-router-flux使用this.props.sceneKey。

3.定義底部導(dǎo)航欄（appRoot.js）

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import PropTypes from 'prop-types';
import {
    View,
    Text,
    BackAndroid,
    StyleSheet
} from 'react-native';
import { Scene, Router, TabBar, Modal, Schema, Actions, Reducer, ActionConst } from 'react-native-router-flux';
import { connect } from 'react-redux';
import LoginPage from './modules/auth/containers/loginPage';
import HomeIndex from './modules/home/containers/indexPage';
import TabIcon from './common/tabIcon';

class AppRoot extends Component {
    static propTypes = {
        dispatch: PropTypes.func
    }

    constructor(props) {
        super(props);
    }

    createReducer(params) {
        const defaultReducer = Reducer(params);
        return (state, action) => {
          this.props.dispatch(action);
          return defaultReducer(state, action);
        };
    }

    onExitApp(){
        BackAndroid.exitApp();
        return true;
    }
    render() {
        return (
            <Router onExitApp={this.onExitApp} 
                    createReducer={ this.createReducer.bind(this) }
                    scenes={ scenes }
             >          
            </Router >
        )
    }    
}

const styles = StyleSheet.create({
    tabBarStyle: {
        backgroundColor: '#fff',
        height:64
    },
    tabBarSelectedItemStyle: {
        backgroundColor: '#fff'
    },
    titleStyle: {
        color: '#fff'
    },
})

const scenes = Actions.create(
    <Scene key="root" hideNavBar={true}>
        <Scene key="login" component={LoginPage} title="登錄" hideNavBar={true} />
        <Scene key="tabbar"
                initial
                tabs={true}
                tabBarPosition="bottom"
                showLabel={false}
                tabBarStyle={styles.tabBarStyle}
                tabBarSelectedItemStyle={styles.tabBarSelectedItemStyle}
                titleStyle={styles.titleStyle}>
                <Scene key="home"
                    hideNavBar={true}
                    component={HomeIndex}
                    icon={TabIcon}
                    titleStyle={styles.titleStyle}/>

                <Scene key="movies"
                    hideNavBar={true}
                    component={HomeIndex}      
                    icon={TabIcon}                
                    titleStyle={styles.titleStyle} />

                <Scene key="theaters"
                    hideNavBar={true}
                    component={HomeIndex}                           
                    icon={TabIcon}
                    titleStyle={styles.titleStyle} />

                <Scene key="me"
                    hideNavBar={true}
                    component={LoginPage}                    
                    icon={TabIcon}
                    titleStyle={styles.titleStyle} />
            </Scene>
    </Scene>
)
export default connect()(AppRoot);

注意事項(xiàng)：

• 引入步驟2中定義的tabIcon(import TabIcon from './common/tabIcon')；
• 定義一個(gè)Scene使其initial={true} tabs={true}作為底部菜單容器；
• 定義若干（一舨2-4個(gè)）個(gè)菜單項(xiàng)，使其key與tabIcon中的key相對(duì)于，設(shè)置icon={TabIcon}, component為該菜單選中時(shí)默認(rèn)的組件。

此外，由于此示例基于redux，為完整項(xiàng)目結(jié)構(gòu)，還需做以下處理：

• 定義dispatch

import PropTypes from 'prop-types';
...
class AppRoot extends Component {
  static propTypes = {
        dispatch: PropTypes.func
   }
...
}

• 使用connect連接React組件

export default connect()(AppRoot);

GIT源碼地址：react-native-demo 分支名稱：tabbar

個(gè)人博客：有恒則成