React Native学习之开源Tab导航组件react-native-tab-navigator

开源组件react-native-tab-navigator：https://github.com/exponentjs/react-native-tab-navigator

安装：npm install react-native-tab-navigator --save
使用：import TabNavigator from 'react-native-tab-navigator';

React Native 原生的控件仅有 TabBarIOS 可供 iOS 平台使用。

而react-native-tab-navigator跨平台，纯 js 开发，同时支持 Android 与 iOS

范例：

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

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

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

class RNAPP extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedTab: 'home',
        };
    }

    render() {
        var homeView = (
            <View style={[styles.flex, styles.center,{backgroundColor:'#ffff0044'}]}>
                <Text style={{ fontSize: 22 }}>我是主页</Text>
            </View>
        );

        var settingView = (
            <View style={[styles.flex, styles.center,{backgroundColor:'#ff000044'}]}>
                <Text style={{ fontSize: 22 }}>我是设置页</Text>
            </View>
        );

        return (
            <TabNavigator
                tabBarStyle={{ height: 60 }}
                >
                <TabNavigator.Item
                    selected={this.state.selectedTab === 'home'}
                    title="主页"
                    renderIcon={() => <Image style={styles.img} source={require('./home_tab_home_normal.png') }/>}
                    renderSelectedIcon={() => <Image style={styles.img} source={require('./home_tab_home_pressed.png') }/>}
                    badgeText="200"
                    onPress={() => this.setState({ selectedTab: 'home' })}
                    >
                    {homeView}
                </TabNavigator.Item>

                <TabNavigator.Item
                    selected={this.state.selectedTab === 'setting'}
                    title="设置"
                    renderIcon={() => <Image style={styles.img} source={require('./home_tab_setting_normal.png') }/>}
                    renderSelectedIcon={() => <Image style={styles.img} source={require('./home_tab_setting_pressed.png') }/>}
                    renderBadge={() => <Text>RNAPP.CC</Text>}
                    onPress={() => this.setState({ selectedTab: 'setting' })}
                    >
                    {settingView}
                </TabNavigator.Item>
            </TabNavigator>
        );
    }
}

const styles = StyleSheet.create({
    flex: {
        flex: 1,
    },
    img: {
        width: 40,
        height: 33,
    },
    center: {
        justifyContent: 'center',
        alignItems: 'center',
    },
});

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