react-native 的 TabBarIOS 组件(底部选择器)

方法一 :

这是在 react-native 中文官网上的例子,亲测功能效果很不错,推荐使用

1. 创建一个  tabbar.js   文件

'use strict';var React = require('react');var ReactNative = require('react-native');var {    StyleSheet,    TabBarIOS,    Text,    View,} = ReactNative;var base64Icon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAQAAACSR7JhAAADtUlEQVR4Ac3YA2Bj6QLH0XPT1Fzbtm29tW3btm3bfLZtv7e2ObZnms7d8Uw098tuetPzrxv8wiISrtVudrG2JXQZ4VOv+qUfmqCGGl1mqLhoA52oZlb0mrjsnhKpgeUNEs91Z0pd1kvihA3ULGVHiQO2narKSHKkEMulm9VgUyE60s1aWoMQUbpZOWE+kaqs4eLEjdIlZTcFZB0ndc1+lhB1lZrIuk5P2aib1NBpZaL+JaOGIt0ls47SKzLC7CqrlGF6RZ09HGoNy1lYl2aRSWL5GuzqWU1KafRdoRp0iOQEiDzgZPnG6DbldcomadViflnl/cL93tOoVbsOLVM2jylvdWjXolWX1hmfZbGR/wjypDjFLSZIRov09BgYmtUqPQPlQrPapecLgTIy0jMgPKtTeob2zWtrGH3xvjUkPCtNg/tm1rjwrMa+mdUkPd3hWbH0jArPGiU9ufCsNNWFZ40wpwn+62/66R2RUtoso1OB34tnLOcy7YB1fUdc9e0q3yru8PGM773vXsuZ5YIZX+5xmHwHGVvlrGPN6ZSiP1smOsMMde40wKv2VmwPPVXNut4sVpUreZiLBHi0qln/VQeI/LTMYXpsJtFiclUN+5HVZazim+Ky+7sAvxWnvjXrJFneVtLWLyPJu9K3cXLWeOlbMTlrIelbMDlrLenrjEQOtIF+fuI9xRp9ZBFp6+b6WT8RrxEpdK64BuvHgDk+vUy+b5hYk6zfyfs051gRoNO1usU12WWRWL73/MMEy9pMi9qIrR4ZpV16Rrvduxazmy1FSvuFXRkqTnE7m2kdb5U8xGjLw/spRr1uTov4uOgQE+0N/DvFrG/Jt7i/FzwxbA9kDanhf2w+t4V97G8lrT7wc08aA2QNUkuTfW/KimT01wdlfK4yEw030VfT0RtZbzjeMprNq8m8tnSTASrTLti64oBNdpmMQm0eEwvfPwRbUBywG5TzjPCsdwk3IeAXjQblLCoXnDVeoAz6SfJNk5TTzytCNZk/POtTSV40NwOFWzw86wNJRpubpXsn60NJFlHeqlYRbslqZm2jnEZ3qcSKgm0kTli3zZVS7y/iivZTweYXJ26Y+RTbV1zh3hYkgyFGSTKPfRVbRqWWVReaxYeSLarYv1Qqsmh1s95S7G+eEWK0f3jYKTbV6bOwepjfhtafsvUsqrQvrGC8YhmnO9cSCk3yuY984F1vesdHYhWJ5FvASlacshUsajFt2mUM9pqzvKGcyNJW0arTKN1GGGzQlH0tXwLDgQTurS8eIQAAAABJRU5ErkJggg==';var TabBarExample = React.createClass({    statics: {        title: '<TabBarIOS>',        description: 'Tab-based navigation.',    },    displayName: 'TabBarExample',    getInitialState: function() {        return {            selectedTab: 'redTab',            notifCount: 0,            presses: 0,        };    },    _renderContent: function(color, pageText, num) {    return (        <View style={[styles.tabContent, {backgroundColor: color}]}>            <Text style={styles.tabText}>{pageText}</Text>            <Text style={styles.tabText}>{num} re-renders of the {pageText}</Text>        </View>    );},render: function() {    return (        <TabBarIOS            unselectedTintColor="yellow"            tintColor="white"            barTintColor="darkslateblue">            <TabBarIOS.Item                title="Blue Tab"                icon={{uri: base64Icon, scale: 3}}                selected={this.state.selectedTab === 'blueTab'}                onPress={() => {                    this.setState({                        selectedTab: 'blueTab',                    });                }}>                {this._renderContent('#414A8C', 'Blue Tab')}            </TabBarIOS.Item>            <TabBarIOS.Item                systemIcon="history"                badge={this.state.notifCount > 0 ? this.state.notifCount : undefined}                selected={this.state.selectedTab === 'redTab'}                onPress={() => {                    this.setState({                        selectedTab: 'redTab',                        notifCount: this.state.notifCount + 1,                    });                }}>                {this._renderContent('#783E33', 'Red Tab', this.state.notifCount)}            </TabBarIOS.Item>            <TabBarIOS.Item                icon={require('./Images/dkw.png')}                selectedIcon={require('./Images/waitToDesign1.png')}                renderAsOriginal                title="More"                selected={this.state.selectedTab === 'greenTab'}                onPress={() => {                    this.setState({                        selectedTab: 'greenTab',                        presses: this.state.presses + 1                    });                }}>                {this._renderContent('#21551C', 'Green Tab', this.state.presses)}            </TabBarIOS.Item>        </TabBarIOS>    );},});var styles = StyleSheet.create({    tabContent: {        flex: 1,        alignItems: 'center',    },    tabText: {        color: 'white',        margin: 50,    },});module.exports = TabBarExample;

---

2. 直接在   index.ios.js   中导入  tabbar.js  即可:

 var HelloReactNative = require("./tabBar");

---

---

方法二 :

貌似已经淘汰了,反正我敲码后实现不了所需要的效果,出现了一整块灰色的蒙版^_^!!

1. 直接在   index.ios.js   中编写:

//TabBarIOS组件(导航功能)import React, {Component} from 'react';import {    AppRegistry,    StyleSheet,    Text,    View,    TabBarIOS} from 'react-native';/**   在 ReactNative 中,实现页面切换,提供了两个组件: TabBarIOS 和 TabBarIOS.Item**   常用性能**   selected: 是否选中某个 Tab, 如果 true 则选中并显示组件*   title: 标题*   barTintColor: Tab栏的背景颜色*   icon: 图标*   onPress: 点击事件.当某个 tabbar 选中时,需要改变组件的 selected={ture}设置* *///把需要的 js 文件导入var MovieListt = require("./movieListView");var Imaget = require("./movieListView");var Moviet = require("./movieListView");var HelloReactNative = React.createClass({    render:function () {        return(            <TabBarIOS style={{flex:1}}>                <TabBarIOS.Item                    title="Item1"                    icon={require("./Images/dkw.png")}>                    <MovieListt/>                </TabBarIOS.Item>                <TabBarIOS.Item                    title="Item2"                    icon={require("./Images/waitToDesign1.png")}>                    <Imaget></Imaget>                </TabBarIOS.Item>               <TabBarIOS.Item                   title="Item13"                   icon={require("./Images/2p_03.png")}>                   <Moviet></Moviet>                </TabBarIOS.Item>            </TabBarIOS>        );    }});AppRegistry.registerComponent('HelloReactNative', () => HelloReactNative);