React native実戦--ナビゲーション編React Navigation(mac)

公式ドキュメントアドレス

https://reactnavigation.org/docs/intro/

React nativeナビゲーションの使用

取付:yarn add react-navigation

StackNavigatorの使用StackNavigator(RouteConfigs, StackNavigatorConfig)
RouteConfigsナビゲーションのパス、名前などconst App = StackNavigator({ Main: {screen: MainScreen}, });
StackNavigatorConfigナビゲーションの構成項目

****(公式ドキュメント参照を推奨)

navigationOptionsのいくつかの構成オプション(初期化時に使用すると、コンポーネント内の個別の設定が上書きされます)

titleタイトル名

headerはreturns a React Element

を個別に設定することができる.

headerTitleタイトル名

headerTitleAllowFontScalingヘッダーフォントをスケーリングできるかどうか、デフォルトはtrue

headerBackTitle戻るボタンの横の文字

headerTruncatedBackTitle

headerRight header右側のElement

headerLeft header左のElement

headerStyle headerのstyle例えばheaderStyle:{backgroundColor:'#fff'}

headerTitleStyleタイトルのstyle

headerBackTitleStyleはタイトル文字を返します.注意は文字のstyle

です.

headerTintColor headerアイコンの色

headerPressColorAndroid>5.0クリック時の波紋の色

gesturesEnabledこの画面IOS(true)Android(flase)

をジェスチャーで開くことができますか?

g e stureResponseDistance画面エッジからのタッチ距離horizontal(デフォルト25)vertical(デフォルト135)

tabナビゲーションと引き出しナビゲーションもありますので、ドキュメントを見ることをお勧めします
ナビゲーションのいくつかのイベント

navigate-簡単に理解すると、別のナビゲーションページ

にジャンプします.

state-ナビゲーションstate

setParams-伝達パラメータ

goBack-現在のページを閉じ、

にナビゲートします.

dispatch-dispatch

を開始
ナビゲーションのいくつかのaction

Navigation Actions Navigate-別のResetに移動-state状態を置き換える(routerをリセットすると理解できる)Back-ロールバックSet Params-パラメータInit-設定初期化(設定していない場合、またはundefinedの場合を除く)