nuke-tabbar/src/view/content.jsx

带导航切换的tab组件

/** @jsx createElement */

import { createElement, Component } from 'rax';
import View from 'nuke-view';
import { isWeex, isWeb } from 'nuke-env';
import Util from 'nuke-util';

const WIDTH = '750rem';

class Wrapper extends Component {
  shouldComponentUpdate(nextProps, nextState) {
    return this.props.shouldUpdate;
  }
  render() {
    return <View style={{ position: 'absolute', top: 0, bottom: 0, right: 0, left: 0 }}>{this.props.children}</View>;
  }
}

class Content extends Component {
  state = { hasBeenSelected: false };

  constructor(props) {
    super(props);
  }

  componentWillMount() {
    if (this.props.selected) {
      this.setState({
        hasBeenSelected: true,
      });
    }
    if (this.props.src) {
      return;
    }
    // embed模式下不会注入changeTo
    const method = this.props.customMethod.changeTo || 'changeTo';
    // hack reference，挂载subComponents实例引用
    if (!this.props.children.ref) {
      this.props.children.ref = Math.random().toString(36);
    }
    this.props.children.type.prototype[method] = this.props.handleTouchTap;
  }

  componentDidMount() {
    // wpo.speed(1, rec(this.t), true);
    // console.log('p1 [sub-tabbar] componentDidMount');
  }

  componentWillReceiveProps(nextProps) {
    // embed模式下不会触发onFocus事件
    if (!this.props.src && this.props.selected !== nextProps.selected) {
      const method = this.props.customMethod.focus || 'onFocus';
      const child = this.props.children;
      /**
       * _owner._instance may cause bug on production.
       */
      const context = child._owner._instance.refs[child.ref];
      context && child.type.prototype[method] && child.type.prototype[method].call(context, nextProps.selected);
    }
    if (this.state.hasBeenSelected || nextProps.selected) {
      this.setState({
        hasBeenSelected: true,
      });
    }
  }

  // shouldComponentUpdate(nextProps, nextState) {
  //     return this.props.asFramework ? true : nextProps.selected !== this.props.selected;
  // }

  // navTo(param){

  // Navigator.push(param.url, null,false);
  // }

  render() {
    const style = {
      width: WIDTH,
      position: 'absolute',
      top: 0,
      bottom: 0,
      right: 0,
      left: 0,
      visibility: 'visible',
    };
    const { webUrl = null, selected, slider, asFramework, children } = this.props;
    let { src } = this.props;
    if (src) {
      !selected && Object.assign(style, { visibility: 'hidden' });
      if (isWeb) {
        // debugger;
        if (webUrl) {
          src = webUrl;
        } else {
          const options = {};
          if (
            window.__QAP__ &&
            window.__QAP__.package &&
            window.__QAP__.package.config &&
            window.__QAP__.package.config.WebRootPath
          ) {
            options.webRootPath = window.__QAP__.package.config.WebRootPath;
          }
          /**
           * 千牛 feature
           * add in 2017.5.17
           * _is_qap_=true 是一个需要持续传递到每一层页面的参数，用于指明此处为 h5 降级的 qap 容器。
           */
          if (window.location.href.indexOf('_is_qap_=true') > 0) {
            options.contextQuery = '_is_qap_=true';
          }
          src = Util.urlHandler(src, options);
          if (src.indexOf('://') < 0) {
            src = `${window.location.protocol}//${src}`;
          }
        }

        return <iframe src={src} style={[style, { height: '100%' }]} frameBorder="0" />;
      }
      return <embed src={src} style={[{ visibility: 'visible' }, style]} type="weex" />;
      // }
    }
    if (slider) {
      return <View style={[style, this.props.style]}>{children}</View>;
    }
    !selected &&
      Object.assign(style, {
        left: `-${WIDTH}`,
        visibility: 'hidden',
        overflow: 'hidden',
      });
    return this.state.hasBeenSelected ? (
      <View style={[style, this.props.style]}>
        <Wrapper shouldUpdate={asFramework}>{children}</Wrapper>
      </View>
    ) : (
      <View />
    );
  }
}

export default Content;