React-native 底部导航栏(二)

1、组件安装：npm install react-native-router-flux --save

2、定义菜单图片和文字：

　　

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;

• 判断菜单是否被选中this.props.focused在老版本的react-native-router-flux使用this.props.selected;
• 取当前菜单this.props.navigation.state.key在老版本的react-native-router-flux使用this.props.sceneKey

3、定义底部导航栏：

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);

由于此示例基于redux，为完整项目结构，还需做以下处理：

• 定义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

请查看原文：https://www.jianshu.com/p/ab7eb90034fd