How to use rax - 10 common examples

import {Component, createElement, PropTypes} from 'rax';
import {isWeex} from 'universal-env';
import Text from 'rax-text';

class Link extends Component {
  static contextTypes = {
    isInAParentLink: PropTypes.bool,
    isInAParentText: PropTypes.bool
  };

  static childContextTypes = {
    isInAParentLink: PropTypes.bool
  };

  getChildContext() {
    return {
      isInAParentLink: true
    };
  }

  render() {
    // https://www.w3.org/TR/html4/struct/links.html#h-12.2.2
    if (this.context.isInAParentLink) {
      return console.error('Nested links are illegal');

InitialComponent: _initialComponent
      });

      if (shell) {
        const shellData = initialDataFromSSR ? initialDataFromSSR[SHELL_DATA] : null;
        appInstance = createElement(shell.component, { data: shellData }, appInstance);
      }

      // Emit app launch cycle.
      emit('launch');

      let rootEl = isWeex ? null : document.getElementById('root');
      if (isWeb && rootEl === null) throw new Error('Error: Can not find #root element, please check which exists in DOM.');

      // Async render.
      return render(
        appInstance,
        rootEl,
        { driver: UniversalDriver, hydrate }
      );
    })
    .catch((err) => {

closePop = () => {
    const icon = findDOMNode(this.refs.icon);
    Animated.rotate(icon, 360);
    const dropMultiRow = findDOMNode(this.refs.dropMultiRow);
    Animated.height(dropMultiRow, 0);

    if (!this.closePopIndex) {
      this.closePopIndex = 1;
    }
    this.closePopIndex++;

    this.state.weexGridTop = -1000 - this.closePopIndex; // fix for android
    this.state.weexGridLeft = -1000 - this.closePopIndex;
    this.state.weexGridPosition = 'relative';
    this.state.weexGridHeight = 0;
    this.setState(this.state);
  }

} else {
      this.index = index;
    }
    this.offsetX = this.index * this.width;

    const realIndex = this.loopedIndex();

    // translate3d for performance optimization
    let swipeView = findDOMNode(this.refs.swipeView);
    const styleText = `translate3d(${-1 * this.offsetX}px, 0px, 0px)`;
    swipeView.style.transform = styleText;
    swipeView.style.webkitTransform = styleText;

    this.loopIdx = this.index < 0 && realIndex !== 0 ? this.total - realIndex : realIndex;
    let childNum = 'child' + this.loopIdx;
    let childView = findDOMNode(this.refs[childNum]);
    childView.style.left = this.offsetX + 'px';

    this.props.onChange({index: this.loopIdx});
    this.setState({
      offsetX: this.offsetX
    });
  }

// Process pageData from SSR
            const pageData = initialDataFromSSR && initialDataFromSSR.pagePath === component.__path ? initialDataFromSSR.pageData : {};
            // Do not cache getInitialPropsPromise result
            setPageInitialProps(Object.assign({}, { [component.__path]: Object.assign({}, pageData, nextDefaultProps) }));
          }
        }).catch((error) => {
          // In case of uncaught promise.
          throw error;
        });
      });
      // Early return null if initialProps were not get.
      return null;
    }

    if (isWeb) {
      return createElement(
        Navigation,
        Object.assign(
          { appConfig, component, history, routes, InitialComponent },
          pageInitialProps[component.__path]
        )
      );
    }

    return createElement(
      Fragment,
      {},
      createElement(component, Object.assign({ history, routes, InitialComponent }, pageInitialProps[component.__path])),
      createElement(TabBar, { history, config: appConfig.tabBar })
    );
  }
}

},
};

const APPBAR_HEIGHT = Platform.OS === 'ios' ? 88 : 112;
const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 40 : 0;
const TITLE_OFFSET = Platform.OS === 'ios' ? 140 : 80;

class Header extends PureComponent {
  static HEIGHT = APPBAR_HEIGHT + STATUSBAR_HEIGHT;
  static Title = HeaderTitle;
  static BackButton = HeaderBackButton;

  // propTypes for people who don't use Flow
  static propTypes = {
    ...NavigationPropTypes.SceneRendererProps,
    onNavigateBack: PropTypes.func,
    renderLeftComponent: PropTypes.func,
    renderRightComponent: PropTypes.func,
    renderTitleComponent: PropTypes.func,
    router: PropTypes.object,
    style: PropTypes.any,
  };

  // props: HeaderProps;

  state = {
    widths: {},
  };

  _getHeaderTitle(navigation) {
    const header = this.props.router.getScreenConfig(navigation, 'header');
    let title;

import { createElement, PureComponent, PropTypes as T } from 'rax';
import { Image, View, Text } from 'rax-components';
import styles from './style';

const CANOPY_IMAGE_URL = 'https://cbu01.alicdn.com/cms/upload/2017/972/092/3290279_2093810242.png';
const SCAN_IMAGE_URL = 'https://cbu01.alicdn.com/cms/upload/2017/533/092/3290335_2093810242.png';
const MESSAGE_IMAGE_URL = 'https://cbu01.alicdn.com/cms/upload/2017/982/192/3291289_2093810242.png';
const SEARCH_IMAGE_URL = 'https://cbu01.alicdn.com/cms/upload/2017/294/133/3331492_2093810242.png';

const noop = () => {};

class Canopy extends PureComponent {
  static propTypes = {
    onScan: T.func,
    onMessage: T.func,
    onSearch: T.func,
    messageNum: T.number, // '99+' maybe
    searchKeyword: T.string,
    searchPlaceholder: T.string
  }

  static defaultProps = {
    onScan: noop,
    onMessage: noop,
    onSearch: noop,
    messageNum: 0
  }

  renderPlaceholder() {
    const { searchKeyword, searchPlaceholder } = this.props;
    if (searchKeyword) {

{'' + displaySecondNum}
    
  ;
};

class Index extends Component {
  state = {
    timeRemaining: 0
  };

  timeoutId = 0;

  static propTypes = {
    formatFunc: PropTypes.func,
    onTick: PropTypes.func,
    onComplete: PropTypes.func,
    tpl: PropTypes.string, // template (example {h}:{m}:{s})
    timeRemaining: PropTypes.number,
    secondStyle: PropTypes.object,
    timeStyle: PropTypes.object, // style for num
    textStyle: PropTypes.object, // style for text
    timeWrapStyle: PropTypes.object,
    timeBackground: PropTypes.string,
    timeBackgroundStyle: PropTypes.object,
    interval: PropTypes.number
  };

  static defaultProps = {
    tpl: '{d}天{h}时{m}分{s}秒',
    timeRemaining: 0,
    interval: 1000
  };

//   panHandlers: ?NavigationPanHandlers,
//   pointerEvents: string,
//   renderScene: NavigationSceneRenderer,
//   style: any,
// };

/**
 * Component that renders the scene as card for the .
 */
class Card extends Component {
  // props: Props;

  static propTypes = {
    ...NavigationPropTypes.SceneRendererProps,
    onComponentRef: PropTypes.func.isRequired,
    onNavigateBack: PropTypes.func,
    panHandlers: NavigationPropTypes.panHandlers,
    pointerEvents: PropTypes.string.isRequired,
    renderScene: PropTypes.func.isRequired,
    style: PropTypes.any,
  };

  render() {
    const {
      panHandlers,
      pointerEvents,
      renderScene,
      style,
      ...props /* NavigationSceneRendererProps */
    } = this.props;

    const viewStyle = style === undefined ?

/* NavigationSceneRendererProps */
const SceneRendererProps = {
  layout: layout.isRequired,
  navigationState: navigationState.isRequired,
  navigation: PropTypes.object,
  position: animatedValue.isRequired,
  progress: animatedValue.isRequired,
  scene: scene.isRequired,
  scenes: PropTypes.arrayOf(scene).isRequired,
};

const SceneRenderer = PropTypes.shape(SceneRendererProps);

/* NavigationPanPanHandlers */
const panHandlers = PropTypes.shape({
  onMoveShouldSetResponder: PropTypes.func.isRequired,
  onMoveShouldSetResponderCapture: PropTypes.func.isRequired,
  onResponderEnd: PropTypes.func.isRequired,
  onResponderGrant: PropTypes.func.isRequired,
  onResponderMove: PropTypes.func.isRequired,
  onResponderReject: PropTypes.func.isRequired,
  onResponderRelease: PropTypes.func.isRequired,
  onResponderStart: PropTypes.func.isRequired,
  onResponderTerminate: PropTypes.func.isRequired,
  onResponderTerminationRequest: PropTypes.func.isRequired,
  onStartShouldSetResponder: PropTypes.func.isRequired,
  onStartShouldSetResponderCapture: PropTypes.func.isRequired,
});

/**
 * Helper function that extracts the props needed for scene renderer.
 */