第一个带tabbar的RN项目

来源：互联网发布：托脉林阴囊托淘宝编辑：程序博客网时间：2024/06/04 15:26

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */var React = require('react');var ReactNative = require('react-native');var {  StyleSheet,  AppRegistry,  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 MTRN = React.createClass({  statics: {    title: '<TabBarIOS>',    description: 'Tab-based navigation.',  },  displayName: 'TabBarExample',  getInitialState: function() {    return {      selectedTab: 'redTab',      notifCount: 0,      presses: 0,    };  },   _renderContent: function(color: string, pageText: string, num?: number) {    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('./flux.png')}          selectedIcon={require('./relay.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,  },});const styles = StyleSheet.create({  container: {    flex: 1,    justifyContent: 'center',    alignItems: 'center',    backgroundColor: '#F5FCFF',  },  welcome: {    fontSize: 20,    textAlign: 'center',    margin: 10,  },  instructions: {    textAlign: 'center',    color: '#333333',    marginBottom: 5,  },});AppRegistry.registerComponent('MTRN', () => MTRN);

属性:

barTintColor string -------------- 标签栏的背景颜色。
tintColor string -------------- 当前被选中的标签图标的颜色。
translucent bool -------------- 一个布尔值，决定标签栏是否需要半透明化。

导入官方文档TabbarIOS组件，在终端运行react-native runios。

ps：（由于官方demo 少了flux.png。。。所以运行后会报错,可自行添加一样名字的图片解决）

0 0