1、大多數(shù)app的首頁都會有底部標(biāo)簽欄近她，用于切換不同的功能模塊叉瘩，在React Native中，我使用的是react-native-tab-navigator組件
2粘捎、首先在Main.js中導(dǎo)入TabNavigator

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

3薇缅、然后編寫代碼，代碼也是很簡單

const tab_cs = require('../images/icon_cs.png')
const tab_cs_selected = require('../images/icon_cs_check.png')
const tab_yunshi = require('../images/icon_yunshi.png')
const tab_yunshi_selected = require('../images/icon_yunshi_check.png')
const tab_zixun = require('../images/icon_zixun.png')
const tab_zixun_selected = require('../images/icon_zixun_check.png')
export default class Main extends Component {

    constructor(props) {
        super(props);
        this.state = {
            selectedTab: 'cs',
        }
    }

    // state = {
    //     selectedTab: 'home'
    // };

    render() {
        return (
            <TabNavigator style={styles.container}>
                <TabNavigator.Item
                    selected={this.state.selectedTab === 'cs'}
                    title="測算"
                    titleStyle={{color: "#323232"}}
                    selectedTitleStyle={{color: "#1e9dff"}}
                    renderIcon={() => <Image source={tab_cs} style={styles.icon}/>}
                    renderSelectedIcon={() => <Image source={tab_cs_selected} style={styles.icon}/>}
                    onPress={() => this.setState({selectedTab: 'cs'})}>
                    <CSComponent nav={this.props.nav}/>
                </TabNavigator.Item>
                <TabNavigator.Item
                    selected={this.state.selectedTab === 'yunshi'}
                    title="運勢"
                    titleStyle={{color: "#323232"}}
                    selectedTitleStyle={{color: "#1e9dff"}}
                    renderIcon={() => <Image source={tab_yunshi} style={styles.icon}/>}
                    renderSelectedIcon={() => <Image source={tab_yunshi_selected} style={styles.icon}/>}
                    onPress={() => this.setState({selectedTab: 'yunshi'})}>
                    <YSComponent nav={this.props.nav}/>
                </TabNavigator.Item>
                <TabNavigator.Item
                    selected={this.state.selectedTab === 'zixun'}
                    title="資訊"
                    titleStyle={{color: "#323232"}}
                    selectedTitleStyle={{color: "#1e9dff"}}
                    renderIcon={() => <Image source={tab_zixun} style={styles.icon}/>}
                    renderSelectedIcon={() => <Image source={tab_zixun_selected} style={styles.icon}/>}
                    onPress={() => this.setState({selectedTab: 'zixun'})}>
                    <ZXComponent
                        nav={this.props.nav}
                    />
                </TabNavigator.Item>
            </TabNavigator>
        );
    }
}
AppRegistry.registerComponent('Main', () => Main);

4攒磨、上面代碼中的CSComponent泳桦、YSComponent、ZXComponent就是分別對應(yīng)的三個標(biāo)簽頁娩缰，注意一點就是灸撰，因為這三個組件不是通過navigator進行跳轉(zhuǎn)的，因此拼坎，在這三個組件中獲取不到navigator浮毯，也就無法實現(xiàn)頁面跳轉(zhuǎn)功能，需要把navigator通過props傳進去泰鸡；
5亲轨、看看效果，只能說RN的開發(fā)處處都是坑鸟顺，android中的banner圖片沒顯示出來有點奇怪(解決了，把ViewpagerAndroid嵌套在Flatlist或者ListView中器虾，需要flatlist設(shè)置removeClippedSubviews={false})：

android.gif

iphone1.gif