ナビゲーションGOBACKを反応させる()任意のページ(統合されていないReduxの)に戻ります

オプション1:

まず、アプリケーションのシナリオは:
アプリ側の開発ではなく、すべての状態を保つのページに戻るには、ページが更新されないジャンプするとき、それは、人生の新しいサイクルをトリガしません。

例えば:A - > B - > C - > D

すべてのページのページB、ページBの状態を維持しながら、BにDから直接ページに戻るにはのライフサイクルを誘発しません、

this.props.navigation.navigate、ジャンプを達成することができますが、それはライフサイクルBで新しいページをトリガする:一部の人々は、あなたが使うことができると言います

this.props.navigation.goBackを持つすべての(「パラメータを受け入れます」);

第二に、それは問題は、パラメータ受信ことに留意すべきである
。1.公式サイトのGOBACK()の公式ウェブサイトの利用状況をナビゲーションを反応させます

キーページのルーティングのための2.goBackパラメータは、このキーはランダムに割り当てられたシステムは、毎回の負荷分布が同じではないです。そうしない場合のパラメータは、GOBACKをrouteNameジャンプを埋めることができないので、代わりに、手動で設定routeNameデフォルト設定されます(つまり、キーが定義されていない)のパラメータは、前のページに戻ります

GOBACK(キー)このキー手段:

このページには、ルーティング値からキーのルートを返します

むしろ、キーページの値に戻るより

Cが返されるので、キー値がキー値Bページをルーティングする、しかし、C、Bのキー値れていないB、Dへのその戻り、ここでキーは、Cの値がキーページであるべきであるので値

だから、私たちはBページにDから返す必要がなければなりません

this.props.navigation.goBack( "Cページキー")

REACT-ナビゲーションのみを提供するバックキーITのゴーから(key)メソッド、GOBACKは、ない戻るに移動しますので
。キー----------------
著作権:この記事は「愚かなCSDNブロガーであります元の記事の」ぽっちゃり、CC 4.0 BY-SAの著作権契約、複製、元のソースのリンクと、この文を添付してくださいに従ってください。
オリジナルリンクします。https://blog.csdn.net/qq_34645412/article/details/82424560

 

 

オプションII:
場合- > B - > C - > D-> Eのスタック順序は、我々はこのページのキーはページにパラメータとして渡されたときにナビゲートすることができ、前にこのようなページの次のページを持っているでしょうキー、あなたはリターンを完了することができます。
- > B {A.key} - > C {A.key、B.key} - > D {A.key、B.key、C.key} - > E {A.key、B.key、C .KEY、D.key}
しかし、これはあなたがA.ページへEから返したい場合という、見当違いのキーにつながる問題がある
あなたは(params.keys.B)をGOBACKしたいが、
一つだけ返した場合;またはGOBACK()を使用して
、我々はそれのページの名前にキー名に必要な転位の問題に対処します。
コードは以下の通りであります:

this.props.navigation.navigate( 'B'、{キー:{A_Key:this.props.navigation.state.key、}});
1。
これは直接A_Keyを使用してページを戻すことができます

this.props.navigation.navigate( 'C'、{
データ:rowData、
キー:{... this.props.navigation.state.params.keys、B_key:this.props.navigation.state.key}
})

この.props.navigation.goBack(this.props.navigation.state.params.keys。A_key)

オプション3:

ナビゲーションデフォルトに反応することは返されるパラメータGOBACKとしてキーを使用することで、キーが動的に生成され、むしろrouteNameよりも私たちの定義です。
オンライン一部を変更する多くの方法がありますソースは、一部には、統合Reduxのことを言って、言いました。ソースコードに私は返すようにしようとしている方法を変更していますが摺動性を開いた場合、立ち往生するのは簡単です。統合reduxが良い方法ですが、初心者のReduxのモデルのためか、さらにはReduxの強力な制御データ・フローは、一つだけがこのような大きなと時間がかかりすぎるためのフレームワークへのリターンとして学校に行ったことを、あまりにも複雑。
今日は、ソースコードを変更せずに、任意のサードパーティ製のフレームワークを使用していないが、また、行うことができ、任意のインターフェイスを返します。
オプション1(NEW推奨):
「REACT-ナビゲーション」:ナビゲーション・ページnavigationOptionsプリントで見つかった「^ 1.5.11」バージョンはグローバルで、ページがthis.props.navigation現在のページのナビゲーションによって印刷されます。だから我々はこのグローバルナビゲーションを使用して、グローバルルーティングスタックに取得することができます。

静的Navigation_routers;
静的navigationOptions = {
ヘッダ({ナビゲーション})=> {
リターン<ヘッダナビゲーション= {ナビゲーション}
centerTxt = { '标题'}
renderRightView = {()=> {
リターン<TouchableOpacity activeOpacity = {1}たonPress = {() => {
{せ状態:{ルート}} =ナビゲーション。
console.log( 'RealNameIdentificationナビゲーション'、ナビゲーション)
にconsole.log( 'ルート'、ルート)。
Navigation_routers =ルート; //保存全局的路由
goToLogin =ルートをさせ[routes.length-1] &&ルート[routes.length-1] .params.loginを.params。
goToLogin && goToLogin()。
}}>
<ビュースタイル= {{幅:SCALE(80)、高さ:SCALE(42)、justifyContent '中央'}}>
<テキストスタイル= {{たfontSize。
</表示>
</ TouchableOpacity>}
}
/>
}
};
及び基底クラス内の書き込み機能を次のように

//ナビゲーション返回任意页面反応
goBackPage(ルータ、ページ名){
{(; iがrouters.length <I ++は、I = 0を聞かせて)ための
(ルータ[I] .routeName ==ページ名)場合、{
(I + 1 ==場合をrouters.length){
this.props.navigation.goBack(NULL)。
返します。
}
にconsole.log( '执行了这里返回' +ページ名+ ":"、ルータ[I] .KEY)。
this.props.navigation.goBack(ルータ[I + 1] .KEY)。
返します。
}
}
};

使用如下。

ページにジャンプするために、第2のパラメータをルーティンググローバル//最初のパラメータ(名前は、ルートの名前で登録されている)
super.goBackPage(Navigation_routers、ページ名);

アンドロイド&& IOSサポート
コード:HTTPS://github.com/wuyunqiang/RNAppを
効果的なプロのテストああ!
----------------
免責事項:この記事は元の記事CSDNブロガー「WYQ_XQ」であり、BY-SAの著作権契約、複製、元のソースのリンクと、この文を添付してくださいCC 4.0に従ってください。 。
オリジナルリンクします。https://blog.csdn.net/u014041033/article/details/77880400

おすすめ

転載: www.cnblogs.com/itgezhu/p/11545281.html