react-native-tab-navigator来做底部导航tabbar

1.github上的地址：

https://github.com/lwx123/react-native-tab-navigator

2.终端运行：

npm install react-native-tab-navigator --save

下载

3.导入，类似安卓，

import TabNavigator from 'react-native-tab-navigator';

4.完整代码：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

import TabNavigator from 'react-native-tab-navigator';
import HomeComponent from './home/HomeComponent';
import SmartLiveComponent from './smart_live/SmartLiveComponent';
import MyComponent from './my/MyComponent';

export default class MangoClient extends Component {
    constructor() {
        super();
        this.state = {
            selectedTab: '首页',
        }
    }

    render() {
        return (
            <View style={styles.container}>
                <TabNavigator>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === '首页'}
                        title="首页"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Image style={styles.icon} source={require("./images/btn_tab_first.png")} />}
                        renderSelectedIcon={() => <Image style={styles.icon} source={require("./images/btn_tab_first_over.png")} />}
                        onPress={() => this.setState({ selectedTab: '首页' })}>
                        <HomeComponent/>
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === '智居'}
                        title="智居"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Image style={styles.icon} source={require("./images/btn_tab_second.png")} />}
                        renderSelectedIcon={() => <Image style={styles.icon} source={require("./images/btn_tab_second_over.png")} />}
                        onPress={() => this.setState({ selectedTab: '智居' })}>
                        <SmartLiveComponent />
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === '我的'}
                        title="我的"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Image style={styles.icon} source={require("./images/btn_tab_four.png")} />}
                        renderSelectedIcon={() => <Image style={styles.icon} source={require("./images/btn_tab_four_over.png")} />}
                        onPress={() => this.setState({ selectedTab: '我的' })}>
                        <MyComponent />
                    </TabNavigator.Item>
                </TabNavigator>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    tabText: {
        color: "#666666",
        fontSize: 13
    },
    selectedTabText: {
        color: "#ff8a00",
        fontSize: 13
    },
    icon: {
        width: 25,
        height: 25
    }
});

AppRegistry.registerComponent('MangoClient', () => MangoClient);

可以自己定义选中与未选中text和图标的样式，

别忘了导入子页面：

import HomeComponent from './home/HomeComponent';
import SmartLiveComponent from './smart_live/SmartLiveComponent';
import MyComponent from './my/MyComponent';

注意自己子页面的路径。

效果：