请问下,android有TabBar组件么



  • 请问下,android上没有TabBar组件么,只看到TabBarIos



  • @oblivioussing 没人吗。。。


  • administrators

    因为这个问题的答案显而易见:官方没有这个组件(请找第三方 http://react.partshttp://github.com )



  • @sunnylqm 好吧,谢了。



  • 我也是要用这个组建自己写了一个Demo版的 ,
    现在觉得有局限性,准备自己实现一个RadioGroup 和 RadioButton
    用来做TabBar的效果会更灵活

    给你参考代码

    'use strict';
    
    let React = require('react-native');
    let TabBarItem = require('./TabBarItem');
    
    let {
      Dimensions,
      StyleSheet,
      Component,
      View,
      Text,
      TouchableWithoutFeedback,
      ToastAndroid,
    } = React;
    
    let scale = Dimensions.get('window').scale;
    
    let TabBar = React.createClass({
      PropTypes: {
        ...View.propTypes,
        style: View.propTypes.style,
      },
    
      getInitialState: function(){
        return {
          selectedItemIndex: -1,
        }
      },
    
      render: function(){
        let children = this.refereshItem();
        return(
          <View style={styles.container}>
            <View style={styles.bindView}>
              {this.state.selectedItemBindView}
            </View>
            <View style={[styles.tabBar, this.props.style]}>
              {children}
            </View>
          </View>
        );
      },
    
      onSelectedChange: function(index, bindView){
        if(index !== this.state.selectedItemIndex) {
          this.setState({
            selectedItemIndex: index,
            selectedItemBindView: bindView,
          });
        }
      },
    
      refereshItem: function() {
        return React.Children.map(this.props.children, (child, index) => {
          if (child.type === TabBarItem) {
            if(this.state.selectedItemIndex === -1 && child.props.selected) {
              this.state.selectedItemIndex = index;
              this.state.selectedItemBindView = child.props.children;
            }
            return React.cloneElement(child, {
              onPress: () => this.onSelectedChange(index, child.props.children),
              selected: this.state.selectedItemIndex === index,
            });
          }
          return child;
        });
      },
    });
    
    let styles = StyleSheet.create({
      container: {
        flex: 1,
      },
      bindView: {
        flex: 1,
        backgroundColor: 'transparent',
      },
      tabBar: {
        borderTopWidth: 1 * 2 / scale,
        borderTopColor: '#ebe9e9',
        height: 49,
        flexDirection: 'row',
        backgroundColor: '#ffffff',
      },
    });
    
    TabBar.Item = TabBarItem;
    module.exports = TabBar;
    
    
    
    
    分割线  -- - -- - -- -- -
    
    
    
    
    'use strict';
    
    var React = require('react-native');
    
    var {
      StyleSheet,
      Component,
      View,
      Image,
      Text,
      TouchableWithoutFeedback,
    } = React;
    
    var TabBarItem = React.createClass({
      propTypes: {
        ...View.propTypes,
        /**
         * Little red bubble that sits at the top right of the icon.
         */
        badge: React.PropTypes.oneOfType([
          React.PropTypes.string,
          React.PropTypes.number,
        ]),
        badgeStyle: View.propTypes.style,
        /**
         * A custom icon for the tab. It is ignored when a system icon is defined.
         */
        icon: Image.propTypes.source,
        /**
         * A custom icon when the tab is selected. It is ignored when a system
         * icon is defined. If left empty, the icon will be tinted in blue.
         */
        selectedIcon: Image.propTypes.source,
        /**
         * Callback when this tab is being selected, you should change the state of your
         * component to set selected={true}.
         */
        onPress: React.PropTypes.func,
        /**
         * It specifies whether the children are visible or not. If you see a
         * blank content, you probably forgot to add a selected one.
         */
        selected: React.PropTypes.bool,
        /**
         * React style object.
         */
        style: View.propTypes.style,
        /**
         * Text that appears under the icon. It is ignored when a system icon
         * is defined.
         */
        title: React.PropTypes.string,
    
        titleStyle: Text.propTypes.style,
        selectedTitleStyle: Text.propTypes.style,
    
      },
    
      initBadge: function() {
        if (this.props.badge !== undefined) {
          let _badgeStyle = this.props.badge ? styles.badgeWithNumber : styles.badgeNoNumber;
          return (
            <View style={[_badgeStyle, this.props.badgeStyle]}>
              <Text style={styles.badgeText}>{this.props.badge}</Text>
            </View>
          );
        }
      },
    
      render: function(){
        var {
          selected,
          onPress,
          style,
          icon,
          selectedIcon,
          title,
          titleStyle,
          selectedTitleStyle,
        } = this.props;
    
        return(
          <TouchableWithoutFeedback onPress={onPress}>
            <View style={[styles.container, style]}>
    
              <Image
                source={selected ? selectedIcon : icon}
                style={styles.icon} />
    
              <Text style={[
                  styles.title,
                  selected ? selectedTitleStyle : titleStyle,]}>
                {title}
              </Text>
    
              {this.initBadge()}
    
            </View>
          </TouchableWithoutFeedback>
        );
    
      },
    });
    
    var styles = StyleSheet.create({
      container: {
        flex: 1,
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        alignSelf: 'stretch',
      },
      icon: {
        alignSelf: 'center',
      },
      title: {
        fontSize: 10,
        alignSelf: 'center',
        justifyContent: 'center',
      },
      badgeNoNumber: {
        flexDirection: 'row',
        justifyContent: 'center',
        top: 4,
        right: 24,
        position: 'absolute',
        width: 10,
        height: 10,
        borderRadius: 10,
        borderWidth: 1,
        alignItems: 'center',
        borderColor: '#ffffff',
        backgroundColor: '#ff0000',
      },
      badgeWithNumber: {
        flexDirection: 'row',
        justifyContent: 'center',
        top: 4,
        right: 24,
        position: 'absolute',
        width: 18,
        height: 18,
        borderRadius: 9,
        borderWidth: 1,
        borderColor: '#ffffff',
        backgroundColor: '#ff0000',
      },
      badgeText: {
        alignSelf: 'center',
        fontSize: 11,
        color: '#ffffff',
        backgroundColor: 'transparent',
      },
    
    });
    
    module.exports = TabBarItem;
    

登录后回复