RN---tabBar+Navigator项目结构

Gif.gif

注意事项

iOS中通常是UITabBarController + UINavigationController +Controller 实现选项卡与导航条，self.hidesBottomBarWhenPushed = YES实现隐藏二级界面tabBar。
RN中用iOS的思路则不能隐藏tabBar，是navigator -> tabBar -> component (tabBar当做普通组件)

导入第三方

打开终端，cd 到你的文件目录

// 导入tabBar
npm install react-native-tab-navigator --save

// 导入navigator
npm  install   react-native-deprecated-custom-components  --save

Navigator

创建NavigatorComponent 组件作为app入口，配置路由

import React,{Component} from 'react';
import {
    View,
    Text,
    StyleSheet
} from 'react-native';

/**
 *  navigator ---命令行：'npm  install   react-native-deprecated-custom-components  --save'
 */
import {Navigator} from "react-native-deprecated-custom-components";
import TabBar from './MainComponent'

export default class NavigatorComponent extends Component{
    render(){
        return(
            //有导航功能，没有类似iOS的导航条,二级界面隐藏 tabBar
            <Navigator
                style={styles.container}
                initialRoute = {{ name: 'TabBar', component: TabBar }}
                configureScene={()=>{
                    return Navigator.SceneConfigs.PushFromRight;
                }}
                renderScene={(route,navigator)=>{
                    let Component = route.component;
                    return <Component {...route.passProps} navigator={navigator}/>;
                }}
            />
        );
    }
}
const styles = StyleSheet.create({
    container:{
        flex:1
    }
});

TabBar

创建MainComponent组件作为TabBar,分别导入首页，我的等等组件

import React,{Component} from 'react';
import {
    View,
    Text,
    Image,
    StyleSheet,
    Platform,// 判断当前运行的系统
} from 'react-native';

/**
 *  导入第三方组件
 *  1，tabBar---- 命令行：'npm install react-native-tab-navigator --save'
 */
import TabNavigator from 'react-native-tab-navigator';

/**
 * 导入根组件
 */
import Home from '../Home/HomeComponent'
import Shop from '../Shop/ShopComponent'
import More from '../More/MoreComponent'
import Mine from '../Mine/MineComponent'



// iOS思路： tabBar ->  navigation -> contorller
// rn思路： navigator -> tabBar -> component (tabBar当做普通组件)
export default class MainComponent extends Component{
    // 状态机，记录选中的组件
    constructor(props){
        super(props);
        this.state={
            selectTab:'home'
        }
    }
    render(){
        return(
            <TabNavigator>
                {/*首页*/}
                {this._renderTabBarItem('首页','home','icon_tabbar_homepage','icon_tabbar_homepage_selected','首页',Home)}
                {/*商家*/}
                {this._renderTabBarItem('商家','shop','icon_tabbar_merchant_normal','icon_tabbar_merchant_selected','商家',Shop)}
                {/*我的*/}
                {this._renderTabBarItem('我的','mine','icon_tabbar_mine','icon_tabbar_mine_selected','我的',Mine)}
                {/*更多*/}
                {this._renderTabBarItem('更多','more','icon_tabbar_misc','icon_tabbar_misc_selected','更多',More)}
            </TabNavigator>
        );
    }

    // 抽出创建TabNavigator方法
    _renderTabBarItem(itemTitle,selectTabName,normalName,selectedName,componentName,component){
        return(
            <TabNavigator.Item
                title={itemTitle}
                selectedTitleStyle={styles.selectedTitleStyle}
                selected={this.state.selectTab=== selectTabName}
                renderIcon={()=><Image source={{uri:normalName}} style={styles.iconStyle}/>}
                renderSelectedIcon={()=><Image source={{url:selectedName}} style={styles.iconStyle}/>}
                onPress={()=>{
                    this.setState({
                        selectTab:selectTabName
                    })
                }}
            >
                {this._renderComponent(selectTabName)}
            </TabNavigator.Item>
        );
    }
    _renderComponent(index){
        if (index==='home'){
            return(<Home navigator={this.props.navigator}/>);
        } else if (index === 'shop'){
            return(<Shop navigator={this.props.navigator}/>);
        } else if (index === 'mine'){
            return(<Mine navigator={this.props.navigator}/>);
        } else {
            return(<More navigator={this.props.navigator}/>);
        }
    }
}
const styles = StyleSheet.create({
    iconStyle:{
        width: Platform.OS === 'ios'? 25:20,
        height:Platform.OS === 'ios'? 25:20,
    },
    selectedTitleStyle:{
        color:'orange'
    }
});

demo传送门
我的博客