EmbedTab 高性能的Tab切换

何时使用#

高性能的Tab切换，与tabbar不同的是，其中每一个tab 对应一个jsbundle

API#

EmbedTab#

属性	说明	类型	默认值
navTop	是否顶部导航，默认为底部的tabbar，可调节到顶部	boolean	false
navScrollable	导航是否可滚动，如果可滚动，则不限制tab宽度，横向滚动。如果不可滚动，则每个子元素flex =1 均分父容器宽度	boolean	false
capsule	是否为胶囊型【此接口预留，样式暂未实现】	boolean	false
src	每个tab对应的js bundle地址，使用qap://协议。例如 qap://settings.js	string	无
iconBar	是否带icon	boolean	false

EmbedTab.Item#

属性	说明	类型	默认值
badge	透出的消息数，以小角标方式显示在右上角	string	无
num	透出的数字，跟在tab的title后面，展示方式 title(num)	string	无
onPress	点击后事件handler	function	无
selected	是否选中	boolean	无
title	透出的文案	string	无
icon	如果tabbar 设置iconbar=true，则此处设置有效，{src: 'xxx',selected:'xxx',size:'medium/large',style:{}}	obj	无

代码演示

预览二维码


/** @jsx createElement */
import {createElement, Component} from 'weex-rx';
import { View, Text} from 'nuke-components';
import { EmbedTab } from 'nuke';
// const isWeex = typeof callNative !== 'undefined';
// import {style} from './style.scss';
// import index from './index.scss';
import {mount} from 'nuke-mounter';




let App = class NukeDemoIndex extends Component {
    constructor() {
        super();
        this.state =  {
            selectedTab: 'redTab',
            notifCount: 3,
            presses: 0,
        };

    }

    _renderContent(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() {
        return (
            <EmbedTab iconBar={true}>
                <EmbedTab.Item
                    title="Blue Tab"
                    selected={this.state.selectedTab === 'blueTab'}
                    icon={{src: '//img.alicdn.com/tfs/TB1cCLYMVXXXXXHXpXXXXXXXXXX-64-64.png',selected:'//img.alicdn.com/tfs/TB1MzYIMVXXXXXYXVXXXXXXXXXX-64-64.png'}}
                    src="qap://button-basic.js"
                    onPress={() => {
                    this.setState({
                      selectedTab: 'blueTab',
                    });
                  }}>
                  {this._renderContent('#414A8C', 'Blue Tab 大家好我是蓝色的区域')}
                </EmbedTab.Item>
                <EmbedTab.Item
                  title="Red Tab"
                  icon={{src: '//img.alicdn.com/tfs/TB1aoTvMVXXXXaKaXXXXXXXXXXX-64-64.png',selected:'//img.alicdn.com/tfs/TB1AZ_yMVXXXXX8aXXXXXXXXXXX-64-64.png'}}
                  badge={this.state.notifCount > 0 ? this.state.notifCount : undefined}
                  selected={this.state.selectedTab === 'redTab'}
                  src="qap://button-iconbutton.js"
                  onPress={() => {
                    this.setState({
                      selectedTab: 'redTab',
                      notifCount: this.state.notifCount + 1,
                    });
                  }}>
                  {this._renderContent('#783E33', 'Red Tab 大家好我是红色的区域', this.state.notifCount)}
                </EmbedTab.Item>
                <EmbedTab.Item
                  renderAsOriginal
                  title="More"
                  icon={{src: '//img.alicdn.com/tfs/TB1UsjYMVXXXXXaXpXXXXXXXXXX-64-64.png',selected:'//img.alicdn.com/tfs/TB12mLPMVXXXXa5XFXXXXXXXXXX-64-64.png'}}
                  selected={this.state.selectedTab === 'greenTab'}
                  src="qap://button-size.js"
                  onPress={() => {
                    this.setState({
                      selectedTab: 'greenTab',
                      presses: this.state.presses + 1
                    });
                  }}>
                  {this._renderContent('#21551C', 'Green Tab 大家好我是绿色的', this.state.presses)}
                </EmbedTab.Item>
                 <EmbedTab.Item
                  renderAsOriginal
                  title="More"
                  icon={{src: '//img.alicdn.com/tfs/TB1.rPuMVXXXXc1aXXXXXXXXXXX-64-64.png',selected:'//img.alicdn.com/tfs/TB1qW2uMVXXXXcUaXXXXXXXXXXX-64-64.png'}}
                  selected={this.state.selectedTab === 'greenTab'}
                  src="qap://button-size.js"
                  onPress={() => {
                    this.setState({
                      selectedTab: 'greenTab',
                      presses: this.state.presses + 1
                    });
                  }}>
                  {this._renderContent('#21551C', 'Green Tab 大家好我是绿色的', this.state.presses)}
                </EmbedTab.Item>
            </EmbedTab>
        );
    }
}
let styles = {
  tabContent: {
    flex: 1,
    alignItems: 'center',
  },
  tabText: {
    color: 'white',
    margin: 50,
  },
};

mount(<App/>, mountNode);

tab的一种使用