codecamp

iOS 选项卡

属性

Edit on GitHub

style View#style

例子

Edit on GitHub

'use strict';var React = require('react-native');var {
  StyleSheet,
  TabBarIOS,
  Text,
  View,
} = React;var TabBarExample = React.createClass({  statics: {    title: '<TabBarIOS>',    description: 'Tab-based navigation.'
  },  getInitialState: function() {    return {      selectedTab: 'redTab',      notifCount: 0,      presses: 0,
    };
  },  _renderContent: function(color: string, pageText: string) {    return (
      <View style={[styles.tabContent, {backgroundColor: color}]}>
        <Text style={styles.tabText}>{pageText}</Text>
        <Text style={styles.tabText}>{this.state.presses} re-renders of the More tab</Text>
      </View>
    );
  },  render: function() {    return (
      <TabBarIOS>
        <TabBarIOS.Item
          title="Blue Tab"
          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')}
        </TabBarIOS.Item>
        <TabBarIOS.Item
          systemIcon="more"
          selected={this.state.selectedTab === 'greenTab'}
          onPress={() => {            this.setState({              selectedTab: 'greenTab',              presses: this.state.presses + 1
            });
          }}>
          {this._renderContent('#21551C', 'Green Tab')}
        </TabBarIOS.Item>
      </TabBarIOS>
    );
  },
});var styles = StyleSheet.create({  tabContent: {    flex: 1,    alignItems: 'center',
  },  tabText: {    color: 'white',    margin: 50,
  },
});module.exports = TabBarExample;


iOS 开关
TabBarIOS.Item
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }