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

注意自己子頁面的路徑。

效果：