import React from 'react';
import ReactDOM from 'react-dom';
import { Page, Button, Toolbar } from 'react-onsenui';

import ons from 'onsenui';
import FooDetail from './FooDetail.jsx';

export default class FooMain extends React.Component {
  constructor(props) {
    super(props);
    this.pushDetailPage = this.pushDetailPage.bind(this);
  }

  // pushPage()のハンドラー関数
  pushDetailPage() {

    // propsに格納されているnavigatorオブジェクトのpushPageで遷移したいページの情報を渡す。
    this.props.navigator.pushPage({
      component: FooDetail,
      title: 'FooDetail'
    });
  }

  render() {
    return (
      <Page>
        <Toolbar>
          <div
            className="center"
          >
            BookMain
          </div>
        </Toolbar>
        <Button
          onClick={this.pushDetailPage}
          className="gcButton"
        >
          PushPage
        </Button>
      </Page>
    );
  }
}

FooMain.defaultProps = {
  title: 'FirstPages'
};

FooMain.propTypes = {
  title: React.PropTypes.string,
  navigator: React.PropTypes.any.isRequired
};

import React from 'react';
import ReactDOM from 'react-dom';
// BackButtonコンポーネントはToolbarコンポーネントの仲間です。後述します。
import { Page, Button, Toolbar, BackButton } from 'react-onsenui';

export default class FooDetail extends React.Component {
  render() {
    return (
      <Page>
        <Toolbar>
          <div
            className="center"
          >
            FooDetail
          </div>
          <div
            className="left"
          >
            <BackButton>
              Back
            </BackButton>
          </div>
        </Toolbar>
        <div className="textCenter mTop20">DetailPage</div>
      </Page>
    );
  }
}

Props

Toolbar Component

Components