React-native-router-flux: ポップ後にシーンを強制的に再レン​​ダリングする

あなたの答えをありがとう、しかし、うまくいきません;）
前のビューは更新されません...

その状態の中で何かが変わったら、それをリフレッシュするべきだと思います。 したがって、更新内でランダムな値を設定します

2016年4月9日には、9時51分で、rtrompier [email protected]書きました：

あなたの答えをありがとう、しかし、うまくいきません;）
前のビューは更新されません...

—
このスレッドにサブスクライブしているため、これを受け取っています。
このメールに直接返信するか、GitHubで表示してくださいhttps://github.com/aksonov/react-native-router-flux/issues/465#issuecomment -207737400

Actions.pop（）の後に更新する方法を教えてもらえますか？

繰り返しますが、更新するには前のコンポーネントの状態を変更する必要があります。 これがNavigationExperimentalAPIの仕組みです。

@aksonov @ helloworld123456および@rtrompierと同じ問題が

シーンA =>シーンB =>シーンC

CからBにポップするとき、シーンBを再レンダリングする必要があります。 @ Elyx0がActions.pop(); Actions.refresh();使用を提案していることがわかります。2つの質問があります。

1. Actions.refresh()呼び出すと、シーンCまたはBが再レン​​ダリングされますか？
2. ナビゲーションバーの戻るボタンのonPressハンドラーをオーバーライドすることは可能ですか？ コードを見た後、それが可能であるようには見えません。

1. Bが更新されるはずですが、テストして調べてみませんか。
2. renderBackButtonを使用して、独自の戻るボタン、カスタムonPressなどを渡します。

了解しました- ます

@samdturner方法を教えていただけますか？

ありがとうございました

@ alfan2305

Actions.pop();
Actions.refresh();

navBar内はどうですか？ Scene refresh=trueがあるべきではありません。 それ以外の場合は、 backButtonのonPressを、上記の2つの呼び出しを呼び出す関数にオーバーライドする必要があります。

@ssomnoremacボタンをオーバーライドすることの何が問題になっていますか？ 非常に簡単です。 この問題がより一般的だった場合、機能を追加すると思いますが、それはエッジケースのようです。

@cridenourルート変更時にシーンを再レンダリングする機能を持つことは、この質問の範囲を超えていると思います。 私の場合、登録シーケンスから戻って、リセットを戻るボタンにフックする代わりに、再レンダリング時にアクションを実行して、Reduxストアで登録の状態をリセットしたいと思います。 これを達成するためのより良い方法はありますか？

あなたの登録コンポーネントは、reduxを聞いて変更を受け取ると思いますか？ または、別のコンポーネントが上にあるときに新しい小道具を受け取った後、シーンが再レンダリングされないという問題はありますか？

つまり、 onBackを提供するので、登録シーンを定義するときは、次のように単純にする必要があります。

const refreshOnBack = () => { Actions.pop(); Actions.refresh(); }

...
<Scene key="registration" component={Registration} onBack={refreshOnBack} />
...

おかげで、私はドキュメントとしてdetailedExampleを使用してonBackについて知りませんでした。

問題ない。 「オフブック」に移行するときは柔軟性が高いため、https：//github.com/aksonov/react-native-router-flux/blob/master/docs/API_CONFIGURATION.mdを一目見てください:)

こんにちはみんな、
まず第一に：私はreactとjavascriptのコーディングの初心者なので、洞察に感謝します。

@cridenourの「refreshOnBack」ソリューションを試してみました。残念ながら、いくつかの問題に遭遇しました。

これで、ボタンは何もしません。 ボタンがハイライト表示されていても、「C」シーン（ @ssomnoremacの例を参照）に
const refreshOnBack = () => { Actions.pop(); }
親ビューを更新しなくても、期待どおりの動作をしました。

何が足りないのですか？ ：/

@Brokrayと同じ結果に

リモートでデバッグする場合、コンソールにエラーが表示されますか？

@cridenourコンソールにエラーはありません。
何が起こっているのかを理解するためにコンソールにログインできるものはありますか？ 多分レデューサーから何か？
レデューサーはまだ私には少し謎です。

ありがとう。

うーん！ たぶん、最初に更新を実行してみてください。

Actions.refresh({key: 'yourSceneKey'}); Actions.pop();

助けてくれてありがとう@cridenour ：私はあなたのアイデアを試したばかりですが、残念ながらそれもうまくいきません。 CからBに問題なく行きましたが、「B」は変わりませんでした。
問題はrefresh()メソッドに起因しているようです。「B」シーンに更新ボタンを配置しても（ Actions.refresh()呼び出す）、何も起こりません。

@jholtonそれがあなたを助けることができるかどうかはわかりませんが：私は私のシーンを更新するカスタムの方法を見つけました：
各シーン（BとC）にレデューサーがあり、「C」でPOSTアクションを呼び出すと、両方のレデューサーが呼び出しをキャッチし、Cが必要な処理を実行し、Bが状態変数を設定します。 'をtrue更新します。
このように、Bの「ComponentWillReceiveProps」で「update」をテストし、シーンを更新するために必要なものを再度呼び出します。

誰かがActions.refresh()問題についてより多くの洞察を持っている場合は、躊躇しないでください！
ありがとう。

@Brokrayそれが機能しなかったことは興味深いですが、とにかくより良い解決策があります。 私はナビゲーションシステムを使用してアプリの状態を渡そうとすることを信じていません-私は常にフラックスストアに固執しています。

@Brokrayそれほど問題がなければ、例を挙げていただけますか？ 単一のシーンにどのようにレデューサーがありますか？ 私はすべてのドキュメントを読みましたが、現時点では少し頭がおかしいです。

@cridenourええ、アプリの状態自体を渡したくありません。 シーンBを再レンダリングしたいだけです。
シーンBでは、データベースごとにいくつかのデータを表示しています。 シーンCには、データベースにデータを追加するフォームがあります。 ユーザーがシーンBに戻ったときに、すべてのライフサイクルメソッド（getInitialState、componentWillMountなど）を起動して、新しく追加されたデータを取得して表示したいだけです。 これらのライフサイクルメソッドは実行されません。

@jholton正解です。これは、良くも悪くも、Reactの設計によるものです。 フラックスの実装（reduxのような多くの人、私は個人的にAltを使用しています）を試して、そこでデータを管理することを強くお勧めします。 そうすれば、データを更新するときに、コンポーネントが再レンダリングされ（つまり、 render()再実行されます）、コンポーネントの初期化に依存しなくなります。 データレイヤーをコンポーネントから離すと、Reactの多くのReactの問題がはるかに簡単になります（そして、コンポーネントはデータを読み取って表示するだけです）。

とは言うものの、Actions.refresh（）は、新しい小道具と再レンダリング（ここでも、 render()のみ）のみを引き起こし、componentWillMountなどを呼び出しません。

@jholtonええと、 @ cridenourが言ったように、アクション、状態、レデューサーを介してデータを管理できるフラックス実装（確かにredux）を使用しています。 フラックスの実装に慣れたら、喜んで例を示します。
@cridenour助けてくれてありがとう！

@Brokrayええ、私は今Reduxチュートリアルに飛び込んでいます。 フラックス/リダックスについてもっと賢く議論できるようになったら、このスレッドに戻ります。 ありがとう。

更新された小道具で成功しますが、次のビューに再び移動しようとすると、エラーが発生します
このコードは私の設定画面に書かれています
Actions.pop（）;
Actions.refresh（{key： 'pageOne'、name： 'wwwww'}）;

これだけが機能してビューを更新しますが、もう一度設定画面に移動しようとするとエラーが発生します

遅れて小道具で空のリフレッシュを呼び出すことで最終的にそれを解決しますか
Actions.popTo（ 'pageOne'）;
setTimeout（（）=> {
Actions.refresh（{name： 'zzzzar'}）;
console.log（ "zzzz"）;
}、10）;

@washaq ：それは私にとってトリックでした

@ ronyv89空き地それは誰かがこれで私を助けることができますか？ " https://github.com/facebook/react-native/issues/9280 "

Actions.pop（）; Actions.refresh（）;
ページを更新するだけで、前のシーンには移動しません。

Actionsメソッドが約束されているので、次のようにそれらをチェーンできると便利です。

Actions.pop().then(Actions.refresh()).

また

Actions.pop().refresh()

@israrhnrtechと@tuneZolaは、前の更新を呼び出したい場合は

Actions.pop();
setTimeout(() => {
Actions.refresh({name:'zzzzar'});
console.log("zzzz");
}, 10);

まず、返信@tuneZolaと@washaqに感謝します。
Actions（ 'pageOne'）;
setTimeout（（）=> {
Actions.refresh（{name： 'zzzzar'}）;
console.log（ "zzzz"）;
}、10）;

このコードは非常にうまく機能しています..
再度、感謝します ..

@israrhnrtech問題ありません。ヒットとトレイルが本当にたくさんあるのは簡単に見えますが、ネイティブの反応が初めてで、その方法がわからない場合は、別の話になります:)

私のシーンでは、これと同じ問題に直面しています。

A => B

BIでreduxストアの状態を変更しますが、 Router.pop() 、componentWillReceivePropsがAでトリガーされません。

私のrouter.popはBページ内にローカルに存在します（デフォルトのnavBarを使用していません）。

Router.pop()
Router.refresh()

動作しない、タイムアウトの設定も動作しない、これを達成する方法についてのアイデアはありますか？

変更したい小道具を渡したときにのみ更新します。

Actions.pop();
setTimeout(() => {
Actions.refresh({name:'zzzzar'});
console.log("zzzz");
}, 10);

これでは、メインビューで名前を小道具として渡します。つまり、 this.props.nameを使用してテキストを更新する場合、更新された状態を小道具として更新で渡す必要があります。これは、ビューが更新を認識する方法だからです。
これがお役に立てば幸いです

私にとってこれを適用するとうまくいきました：
navigator.replacePreviousAndPop（previousRoute）;

@phpscrpt 、それがどのように機能するかについて、いくつかのコードでもっと簡単に説明できますか？

@israrhnrtech申し訳ありませんが、react-nativeの組み込みのNavigatorコンポーネント用です。 react-native-router-fluxがナビゲーターコンポーネントから継承されている場合は、何らかの形で機能する可能性があります。

@washaq以下に実装されているタイムアウトソリューションは、私には機能しません。

backAndRefresh（）{

Actions.pop（）;
setTimeout（（）=> {
Actions.refresh（{name： 'zzzzar'}）;
console.log（ "zzzz"）;
}、10）;

}

戻って更新する

更新したいページのcomponentDidMountが呼び出されていません。

私は何かが足りないのですか？

ありがとう！

@ivansifrimこれに対する解決策を見つけましたか？
また、画面に着地した後にアクションをトリガーする方法を見つけようとしています

これは私にとってはうまくいきます：Actions.pop（{refresh：{}}）;
現在の画面をポップし、親画面を更新します。

@ JeroenNelen-まだ行っていませんが、 @ Bertjuhhが提案したことを試してみます

言及された問題の解決策はありますか？

これは私にとってうまく機能しています：

const refreshOnBack = () => { Actions.pop({ refresh: {} }); }
...
// child scene
<Scene key="settings" component={SettingsScreen} onBack={refreshOnBack}/>
...

私が最近行った単純なアプリでは、このように回避しました（このコードはエクスポートの上のルーターファイルにあります）：

Actions.pop = () => Actions.NAME_OF_PREVIOUS({ type: ActionConst.RESET });

popをオーバーライドするために使用している関数で、いくつかの条件付きロジックを実行する必要があります。 私の場合はうまく機能しました（ ActionConst.RESETを使用しているときに別の逆遷移を気にしないことは認められています）。 クイックn厄介。

最後にここでうまく機能しているものはありますか？ 上記の提案はどれも実際には機能していません...

+1

@ivansifirm最後に動作するはずです。更新パスで日付を変更したい小道具を覚えておいてください。つまり、「名前」の上にある小道具は、前のビューで更新したい小道具です。

ここで同じ問題、非常に奇妙です。
うまくいくこともあれば、うまくいかないこともあります。

これが私のコードです。 （私の場合、シーンAとB、ナビゲートによるA => B、ポップによるB => Aがあります）

シーンA：
componentWillReceiveProps(nextProps) { if (this.props.test !== nextProps.test) { this._getUser() // I need call this func after pop } }
シーンB

NavigationActions.pop({refresh:{test:true}})

私がどうかしましたか、まずいことでもありましたか ？
ありがとう。

NavigationActions.pop（{refresh：{test：true}}）

に変更できますか

NavigationActions.pop（{refresh：{test：！test}}）

19:29で火、2017年6月20日には、MobileStar [email protected]
書きました：

ここで同じ問題、非常に奇妙です。
うまくいくこともあれば、うまくいかないこともあります。

これが私のコードです。 （私の場合、シーンAとB、A => Bをナビゲートすると、
B => Aポップによる）

シーンA：

componentWillReceiveProps（nextProps）{
if（this.props.test！== nextProps.test）{
this._getUser（）// popの後にこのfuncを呼び出す必要があります
}
}

シーンB

NavigationActions.pop（{refresh：{test：true}}）

私がどうかしましたか、まずいことでもありましたか ？
ありがとう。

—
このスレッドにサブスクライブしているため、これを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/aksonov/react-native-router-flux/issues/465#issuecomment-309945049 、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/AExqB3CZM4U1yuwKslfuBj88uVVJulGtks5sGIAbgaJpZM4H_0pN
。

@nikitphご協力いただきありがとうございます。
ええ、私はそれで試しました。
ただし、componentWillReceivePropsは、ポップ後に常に起動するとは限りません。
componentWillReceivePropsが起動されたとき、またはポップ後に他のライフサイクル関数が起動されたときに、私に知らせてもらえますか？
よろしく。

@SelfnessAidああ、この問題の解決をあきらめた理由を覚えています。 私も同様の問題を抱えていました。 「しかし、componentWillReceivePropsは、ポップ後に常に起動するとは限りません。」 ターゲットページにあるスワイプ可能なビューのインデックスを更新することで、この問題を回避できたと思います。 はい、それはひどいですが、私は私の問題を解決しています。

私は何かを理解しました。 私はそれがまったくきれいだとは思いませんが、私にとってはそれが仕事をしているので、ここにあります。 （私はこれを行うためにReduxを使用しています）

Action.scene()またはAction.pop()実行するたびに、フェッチ関数を呼び出す必要がありました。 このフェッチは最初はcomponentWillMountメソッドで呼び出されましたが、 Action.pop()を使用すると呼び出されないため、 Action.scene()とAction.pop()すべての呼び出しをアクションである2つのカスタム関数に変更しました。つまり、通常よりも多くのreduxコンテナがありますが、eh：/です。 だからここにあります：

const goTo = (scene, label, sceneParams = {}, pushed = true) => ( // Equivalent of `Action.scene()`
   (dispatch) => {
     dispatch(setAppLabel(scene, label, sceneParams, pushed)); // I'm storing some infos about the scene in my store. Will be used in custom `pop()` later.
     mapSceneToAction(scene, dispatch, sceneParams); // // Calls the function initially used in the componentWillMount. I'll show a sample further
     Actions[scene](sceneParams);
   }
);

const pop = () => (  // Equivalent of `Action.pop()`
   (dispatch, getState) => {
     Actions.pop();
     mapSceneToAction(getState().sceneReducer.previousScene, dispatch, getState().sceneReducer.previousScene.itemProps); // Retrieving some infos stored in the store during `goTo()`
   }
);

そして、mapSceneToAction（）は次のようになります。

const mapSceneToAction = (scene, dispatch, itemProps) => {
  switch (scene) {
    case 'events':
      dispatch(fetchEvents()); // Or any other action :P
      break;
    case 'anyScene':
      dispatch(anyAction(withAnyParams));
      break;
    default:
  }
};

それは少しトリッキーで、重く、おそらく本当にきれいではありませんが、私はこの方法を使用しているので、私が持っていたすべての問題を解決することができました。

関数小道具を次のシーンに渡します。
Actions.YourRoute（{onPress：（）=> setState ..}）;

次に、次のシーンで、関数propを呼び出します
this.props.onPress（）;

@ bethuel11これは、コンポーネントをループで再レンダリングしています。 しかし、良い解決策ではありません

簡単なトリックを見つけました...

現在の状態/現在のページ=>

Actions.pop（）;
setTimeout（（）=> {
Actions.refresh（{
isRefresh：true、
}）;
}、0）;

透過状態/ページ=>レンダリング内で以下の条件を追加、

if（this.props.isRefresh）{
Actions.refresh（{
isRefresh：false、
}）;
//ここでsetstateを呼び出すと、自動的に再レン​​ダリングされます...
this.setState（{isloading：true}）;

ありがとう。
}