iOS 选项卡

属性

Edit on GitHub

style View#style

例子

Edit on GitHub 

  1. 'use strict';
  2. var React = require('react-native');
  3. var {
  4.   StyleSheet,
  5.   TabBarIOS,
  6.   Text,
  7.   View,
  8. } = React;
  9. var TabBarExample = React.createClass({
  10.   statics: {
  11.     title: '<TabBarIOS>',
  12.     description: 'Tab-based navigation.'
  13.   },
  14.   getInitialState: function() {
  15.     return {
  16.       selectedTab: 'redTab',
  17.       notifCount: 0,
  18.       presses: 0,
  19.     };
  20.   },
  21.   _renderContent: function(color: string, pageText: string) {
  22.     return (
  23.       <View style={[styles.tabContent, {backgroundColor: color}]}>
  24.         <Text style={styles.tabText}>{pageText}</Text>
  25.         <Text style={styles.tabText}>{this.state.presses} re-renders of the More tab</Text>
  26.       </View>
  27.     );
  28.   },
  29.   render: function() {
  30.     return (
  31.       <TabBarIOS>
  32.         <TabBarIOS.Item
  33.           title="Blue Tab"
  34.           selected={this.state.selectedTab === 'blueTab'}
  35.           onPress={() => {
  36.             this.setState({
  37.               selectedTab: 'blueTab',
  38.             });
  39.           }}>
  40.           {this._renderContent('#414A8C', 'Blue Tab')}
  41.         </TabBarIOS.Item>
  42.         <TabBarIOS.Item
  43.           systemIcon="history"
  44.           badge={this.state.notifCount > 0 ? this.state.notifCount : undefined}
  45.           selected={this.state.selectedTab === 'redTab'}
  46.           onPress={() => {
  47.             this.setState({
  48.               selectedTab: 'redTab',
  49.               notifCount: this.state.notifCount + 1,
  50.             });
  51.           }}>
  52.           {this._renderContent('#783E33', 'Red Tab')}
  53.         </TabBarIOS.Item>
  54.         <TabBarIOS.Item
  55.           systemIcon="more"
  56.           selected={this.state.selectedTab === 'greenTab'}
  57.           onPress={() => {
  58.             this.setState({
  59.               selectedTab: 'greenTab',
  60.               presses: this.state.presses + 1
  61.             });
  62.           }}>
  63.           {this._renderContent('#21551C', 'Green Tab')}
  64.         </TabBarIOS.Item>
  65.       </TabBarIOS>
  66.     );
  67.   },
  68. });
  69. var styles = StyleSheet.create({
  70.   tabContent: {
  71.     flex: 1,
  72.     alignItems: 'center',
  73.   },
  74.   tabText: {
  75.     color: 'white',
  76.     margin: 50,
  77.   },
  78. });
  79. module.exports = TabBarExample;