ビュー・リアクト・コンポーネント

ビュー - 独自の設定、ナビゲーション、履歴を持つ、アプリの独立した視覚的な部分です。各ビューはまた、異なるナビバーやツールバーのレイアウト、異なるスタイルを持つことができます。つまり、アプリの中のアプリのようなものです。このような機能により、アプリの各部分を簡単に操作することができます。

View Reactコンポーネントは、Framework7のViewコンポーネントを表しています。

Viewコンポーネント

以下のコンポーネントが含まれています。

View - 単一の View-router コンポーネント。
Views - タブとして使用される複数のビューのラッパー要素

ビューのプロパティ

Prop	Type	Default	Description
<View> properties
init	boolean	true	ビューを自動的に初期化します。
tab	boolean		ビューをタブとして使用
tabActive	boolean		View-Tab を現在のアクティブな Tab として定義します。
View React component also accepts all View Parameters. All of them can be passed via separate props on `<View>` component
<Views> properties
tabs	boolean		ビューをタブのラッパーコンテナとして使用

ビューのイベント

スワイプバック関連のイベントは、iOSテーマでのみ利用可能です。

Event	Description
viewInit	イベントは、ビューの初期化時に発生します。
viewResize	イベントはマスター詳細のサイズ変更時に発生します (`masterDetailResizable` が有効な場合)
swipeBackMove	イベントはスワイプバックの移動中に発生します。
swipeBackBeforeChange	イベントは、スワイプバックを解除して前のページに戻るアニメーションの直前に発生します。
swipeBackAfterChange	イベントはスワイプバック後に、前のページへのアニメーションをリリースした時に発生します。
swipeBackBeforeReset	イベントは、あなたがそれを解放したときに現在のページにスワイプバックアニメーションの直前にトリガされます。
swipeBackAfterReset	イベントは、リリースしたときに現在のページにスワイプバックアニメーションの後にトリガされます。
tabShow	イベントは View-Tab が表示/アクティブになった時に発生します。
tabHide	View-Tabが不可視/非アクティブになると、イベントが発生します。

ビューインスタンスへのアクセス

自動初期化を使用してビューを初期化し（init={true}プロパティーを使用）、ビューAPIを使用する必要がある場合（ルーターなど）、初期化されたインスタンスにアクセスすることができます。

nameプロパティ(例: "left")を渡していれば、this.$f7.views.leftのようにアクセスできます。
メインビュー（main={true}のプロパティーを持つ）は、常に this.$f7.views.main でアクセスできます。

例

最小限のレイアウト

<View main>
  ...
</View>

{/* Renders to: */}

<div class="view view-main">
  ...
</div>

タブとしてのビュー

<App>
  ...
  <Views tabs>
    <View id="tab-1" main tab tabActive>...</View>
    <View id="tab-2" tab>...</View>
  </Views>
  ...
</App>

{/* Renders to: */}
<div class="framework7-root">
  <div class="views tabs">
    <div class="view view-main tab tab-active" id="tab-1">...</div>
    <div class="view tab" id="tab-2">...</div>
  </div>
</div>

パラメータ付き

<View
  url="/home/"
  animate={false}
  iosDynamicNavbar={false}
  browserHistory={true}
>
  ...
</View>