react-native TabNavigator底部导航栏

先上效果图

1、根目录 安装：

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

2、引入

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

3、完整代码

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

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

export default class Index 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("./img/delete.png")} />}
                        renderSelectedIcon={() => <Image style={styles.icon} source={require("./img/delete.png")} />}
                        onPress={() => this.setState({ selectedTab: '首页' })}>
                        <Text>这里可</Text>
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === '接待/预约'}
                        title="接待/预约"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Image style={styles.icon} source={require("./img/delete.png")} />}
                        renderSelectedIcon={() => <Image style={styles.icon} source={require("./img/delete.png")} />}
                        onPress={() => this.setState({ selectedTab: '接待/预约' })}>
                        <Text>以放你</Text>
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === '个人中心'}
                        title="个人中心"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Image style={styles.icon} source={require("./img/delete.png")} />}
                        renderSelectedIcon={() => <Image style={styles.icon} source={require("./img/delete.png")} />}
                        onPress={() => this.setState({ selectedTab: '个人中心' })}>
                        <Text>组件</Text>
                    </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
    }
});

注意图片路径！！可能会报错~~~

navigator的属性tabBarStyle来指定导航栏的高度