React-native-router-flux: فرض إعادة تصيير المشهد بعد فرقعة

شكرا على إجابتك ولكن لا تعمل ؛)
لا يتم تحديث العرض السابق ...

أعتقد أنه يجب تحديثه إذا تم تغيير شيء ما داخل حالته. لذا قم بتعيين بعض القيم العشوائية في التحديث

في 09 أبريل 2016 ، الساعة 09:51 ، كتب rtrompier [email protected] :

شكرا على إجابتك ولكن لا تعمل ؛)
لا يتم تحديث العرض السابق ...

-
أنت تتلقى هذا لأنك مشترك في هذا الموضوع.
قم بالرد على هذه الرسالة الإلكترونية مباشرة أو اعرضها على GitHub https://github.com/aksonov/react-native-router-flux/issues/465#issuecomment -207737400

هل يمكن لأي شخص أن يخبرني بكيفية التحديث بعد Actions.pop ()؟

مرة أخرى ، يجب تغيير حالة المكون السابق ليتم تحديثه. هذه هي الطريقة التي تعمل بها واجهة برمجة تطبيقات NavigationExperimental.

aksonov أواجه نفس المشكلة مثل @ helloworld123456 و rtrompier . يبدو تدفق التنقل الخاص بي على النحو التالي:

المشهد أ => المشهد ب => المشهد ج

عندما أقوم بالانتقال من C إلى B ، أحتاج إلى إعادة عرض المشهد B. أرى أن @ Elyx0 قد اقترح استخدام Actions.pop(); Actions.refresh(); لدي سؤالان:

1. هل سيتم استدعاء Actions.refresh() rerender Scene C أو B؟
2. هل من الممكن تجاوز معالج onPress لزر الرجوع في شريط التنقل؟ لا يبدو أنه ممكن بعد النظر إلى الكود.

1. يجب أن ينعش B ، لكن لماذا لا تختبرها وتكتشفها!
2. استخدم renderBackButton لتمرير زر الرجوع الخاص بك ، المخصص عند الضغط وكل شيء.

فهمت ذلك - شكرا cridenour

samdturner هل يمكن أن تخبرني كيف؟

شكرا لك

@alfan2305

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

ماذا عن داخل navBar ؟ ألا يجب أن يكون لدينا refresh=true على Scene . بخلاف ذلك ، يتعين عليّ تجاوز onPress لـ backButton إلى وظيفة تستدعي المكالمتين المذكورتين أعلاه.

ssomnoremac ما هو الخطأ في تجاوز الزر؟ من السهل جدا القيام به. إذا كانت هذه المشكلة أكثر شيوعًا ، فسأقول إننا نضيف الوظيفة ولكن يبدو أنها حالة متطورة.

cridenour أعتقد أن الأمر يتجاوز نطاق هذا السؤال للحصول على القدرة على إعادة تقديم مشهد عند تغيير المسار. في حالتي ، أرغب في العودة من تسلسل التسجيل والحصول على حالة إعادة التسجيل في متجر Redux الخاص بي عن طريق إطلاق إجراء على إعادة العرض بدلاً من ربط إعادة التعيين في زر الرجوع. هل هنالك طريقة افضل لانجاز هذا؟

أعتقد أن مكون التسجيل الخاص بك سيتلقى التغيير من خلال الاستماع إلى إعادة التشغيل ، أليس كذلك؟ أم أن المشكلة التي لا يتم إعادة تصيير المشهد فيها بعد تلقي دعائم جديدة عندما يكون مكون آخر في المقدمة؟

أعني أننا نقدم onBack لذلك عند تحديد مشهد التسجيل يجب أن يكون بهذه البساطة

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

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

شكرًا ، لم أكن أعرف عن onBack حيث أستخدم المثال التفصيلي كمحرر مستنداتي.

لا مشكلة. ألقِ نظرة بالتأكيد على https://github.com/aksonov/react-native-router-flux/blob/master/docs/API_CONFIGURATION.md نظرًا لوجود قدر كبير من المرونة عند الخروج من الحجز :)

مرحبا يا شباب،
بادئ ذي بدء: أشكركم جميعًا على رؤاكم فهي مفيدة حقًا لأنني مبتدئ تمامًا في تفاعل وترميز جافا سكريبت.

لقد جربت للتو حل "RefreshOnBack" من cridenour : لسوء الحظ ، عثرت على بعض الصعوبات.

الآن الزر لا يفعل شيئًا. أبقى على المشهد "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) ، عندما أستدعي إجراء POST في "C" يقوم كل من مخفضاتي بالتقاط المكالمة ، يقوم C بما يحتاج إلى القيام به و B يعين متغير الحالة " تحديث 'إلى true .
بهذه الطريقة ، في "ComponentWillReceiveProps" من B ، أختبر "التحديث" ، وأعد الاتصال بما أحتاجه لتحديث المشهد.

إذا كان لدى شخص ما المزيد من الأفكار حول مشكلة Actions.refresh() ، فلا تتردد!
شكرا.

Brokray من المثير للاهتمام أنه لم ينجح - ولكن لديك الحل الأفضل على أي حال. لا أؤمن بمحاولة استخدام نظام الملاحة لاجتياز حالة التطبيق - فأنا دائمًا ما ألتزم بمخازن التدفق.

Brokray إذا لم يكن هناك الكثير من المتاعب ، هل يمكنك تقديم مثال؟ كيف لديك مخفض لمشهد واحد؟ لقد قرأت جميع الوثائق ، لكنها تجاوزت رأسي قليلاً في هذه المرحلة.

cridenour نعم ، لا أريد تجاوز حالة التطبيق في حد ذاتها. أريد فقط إعادة تصيير المشهد B.
في المشهد ب ، أعرض بعض البيانات من قاعدة البيانات. في المشهد C ، لدي نموذج يضيف البيانات إلى قاعدة البيانات. عندما يعود المستخدم إلى المشهد B ، أريد فقط تشغيل جميع طرق دورة الحياة (مثل getInitialState ، و componentWillMount ، وما إلى ذلك) حتى يتم استرداد البيانات المضافة حديثًا وعرضها. طرق دورة الحياة هذه لا تطلق.

jholton Correct ، وهذا حسب التصميم من React ، للأفضل أو للأسوأ. أقترح بشدة تجربة تنفيذ التمويه (الكثير من الأشخاص مثل redux ، وأنا شخصياً أستخدم Alt) وإدارة البيانات هناك. بهذه الطريقة ، عند تحديث البيانات ، سيعاد عرض المكون (وهذا يعني إعادة تشغيل render() ) ولن يعتمد على تهيئة المكون. تصبح الكثير من مشكلات التفاعل في React أسهل كثيرًا بمجرد تحريك طبقة البيانات بعيدًا عن المكونات (وقراءة البيانات والعرض فقط).

ومع ذلك ، فإن Actions.refresh () ستؤدي فقط إلى ظهور خاصيات جديدة وإعادة تصيير (مرة أخرى ، فقط render() ) ولكنها لن تستدعي componentWillMount ، إلخ.

jholton حسنًا ، كما قال cridenour ، إنني أستخدم تنفيذ التدفق (الإعادة بالفعل) والذي يسمح لك بإدارة بياناتك من خلال الإجراءات والحالة والمخفض. بمجرد أن تتعرف على تنفيذ التمويه ، سأقدم لك مثالاً بكل سرور!
cridenour شكرا لك مرة أخرى على مساعدتك!

Brokray نعم ، أنا

هل سأنجح في الدعائم المحدثة ولكن عندما أحاول الانتقال إلى العرض التالي مرة أخرى ، فهذا يعطيني خطأ
هذا الرمز مكتوب في شاشة الإعداد الخاصة بي
Actions.pop () ؛
Actions.refresh ({key: 'pageOne' ، الاسم: 'wwwww'}) ؛

هذا فقط سيعمل ويحدث العرض ولكن عندما أحاول الانتقال مرة أخرى إلى شاشة الإعداد ، فهذا يعطيني خطأ

هل سأحلها أخيرًا عن طريق استدعاء التحديث الفارغ مع الدعائم بعد التأخير
Actions.popTo ('pageOne') ؛
setTimeout (() => {
Actions.refresh ({name: 'zzzzar'})؛
console.log ("zzzz") ؛
} ، 10) ؛

washaq : هذه الحيلة بالنسبة لي

@ ronyv89 glade أنها تعمل لأجلك هل يمكن لأي شخص مساعدتي في هذا؟ " https://github.com/facebook/react-native/issues/9280 "

Actions.pop () ؛ Actions.refresh () ؛
فقط قم بتحديث الصفحة ولكن لا تنتقل إلى المشهد السابق.

سيكون من الجيد أن يتم الوعد بأساليب الإجراءات بحيث يمكنك تجميعها معًا مثل

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

أو

Actions.pop().refresh()

israrhnrtech و tuneZola لا يعمل إذا كنت تريد استدعاء التحديث السابق ، فأنت بحاجة إلى الاتصال به بعد التأخير ثم سيتم الاتصال به بشكل صحيح هكذا

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

بادئ ذي بدء ، شكرًا على الرد washaq .
الإجراءات ('pageOne') ؛
setTimeout (() => {
Actions.refresh ({name: 'zzzzar'})؛
console.log ("zzzz") ؛
} ، 10) ؛

هذا الرمز يعمل بشكل جيد جدا ..
شكرا لك مرة أخرى ..

israrhnrtech ، لا توجد مشكلة والمسار لول يبدو بسيطًا ، لكن عندما تكون جديدًا على رد فعل أصلي ولا يعرف كيفية القيام بذلك ، فإن قصته المختلفة :)

أواجه نفس المشكلة ، في "المشاهد" الخاصة بي:

أ => ب

في BI ، قمت بتغيير حالة متجر redux الخاص بي ، ولكن عندما أقوم بإجراء Router.pop() ، لا يتم تشغيل componentWillReceiveProps على A.

يوجد جهاز router.pop محليًا داخل الصفحة B (لا يستخدم شريط التنقل الافتراضي) ، لذلك

Router.pop()
Router.refresh()

لا يعمل ، تحديد مهلة لا يعمل أيضا ، أي أفكار حول كيفية تحقيق ذلك؟

سوف أقوم بالتحديث فقط عند تمرير الدعائم التي تريد تغييرها ، أي

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

في هذا الاسم ، مرر كدعامات في وجهة نظري الرئيسية ، مما يعني أنه إذا كنت تستخدم this.props.name لتحديث النص ، فحينئذٍ تحتاج إلى تمرير الحالة المحدثة كدعامات في التحديث لأن هذا هو السبب في معرفة طريقة العرض بتحديثها.
ارجوا ان يساعدك هذا

بالنسبة لي ، نجح تطبيق هذا:
navigator.replacePreviousAndPop (previousRoute) ،

phpscrpt ، هل يمكنك إيجاز المزيد مع بعض الرموز التي توضح كيفية عملها؟

israrhnrtech آسف لأنه لمكوّن المستكشف المدمج في رد فعل أصلي. إذا تم توريث رد فعل-أصلية-موجه-تدفق من مكون المستكشف بطريقة ما فقد يعمل.

washaq لا يعمل حل المهلة كما هو مطبق أدناه:

backAndRefresh () {

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

}

ارجع للخلف وقم بالتحديث

لم يتم استدعاء componentDidMount على الصفحة التي أريد تحديثها.

هل فاتني شيء؟

شكرا!

ivansifrim هل وجدت حلاً لهذا؟
نحاول أيضًا إيجاد طريقة لبدء إجراء بعد الهبوط على الشاشة

هذا يعمل بالنسبة لي: Actions.pop ({تحديث: {}})؛
ينبثق الشاشة الحالية ويحدث الشاشة الرئيسية.

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 ). سريع سيء.

هل هناك أخيرًا أي شيء يعمل جيدًا هنا؟ لا تعمل أي من المقترحات أعلاه حقًا ...

+1

ivansifirm يجب أن تعمل آخر مرة استخدمتها ، تذكر في تحديث تمرير الدعائم التي تريد إلغاء تأريخها فوق "الاسم" هي الدعائم التي أريد تحديثها في وجهة نظري السابقة

نفس المشكلة هنا ، غريب جدا.
أحيانًا يعمل ، وأحيانًا لا يعمل.

هذا هو الكود الخاص بي. (في حالتي ، هناك مشهد A و B ، A => B من خلال التنقل ، B => A عن طريق الفرقعة)

المشهد أ:
componentWillReceiveProps(nextProps) { if (this.props.test !== nextProps.test) { this._getUser() // I need call this func after pop } }
المشهد ب

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

ما خطبتي؟
شكرا.

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

يمكنك تغييره إلى

NavigationActions.pop ({Refresh: {test:! test}})

في الثلاثاء 20 حزيران (يونيو) 2017 الساعة 7:29 مساءً ، MobileStar [email protected]
كتب:

نفس المشكلة هنا ، غريب جدا.
أحيانًا يعمل ، وأحيانًا لا يعمل.

هذا هو الكود الخاص بي. (في حالتي ، هناك مشهد A و B ، A => B من خلال التنقل ،
B => A عن طريق الفرقعة)

المشهد أ:

componentWillReceiveProps (nextProps) {
إذا (this.props.test! == nextProps.test) {
this._getUser () // أحتاج إلى استدعاء هذا func بعد pop
}
}

المشهد ب

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 أو عندما يكون هناك func آخر لدورة الحياة يتم إطلاقه بعد فرقعة؟
يعتبر.

SelfnessAid آه الآن أتذكر لماذا

لقد اكتشفت شيئًا ما. لا أعتقد حقًا أنه نظيف على الإطلاق ولكنه بالنسبة لي يؤدي المهمة ، لذا ها هو. (أنا أستخدم Redux للقيام بذلك)

كنت بحاجة لاستدعاء وظيفة الجلب كلما فعلت Action.scene() أو Action.pop() . تم استدعاء هذا الجلب في البداية في طريقة componentWillMount ولكن نظرًا لأنه لم يتم استدعاؤه عند استخدام Action.pop() قمت بتغيير كل مكالماتي Action.scene() و Action.pop() إلى وظيفتين مخصصتين وهي إجراءات يعني أن لدي حاويات إعادة إرسال أكثر مما ينبغي عادةً لكن 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 ..}) ؛

ثم في المشهد التالي ، قم باستدعاء التابع function
this.props.onPress () ؛

@ bethuel11 هذا هو إعادة عرض المكون في حلقة. ليس حلا جيدا بالرغم من ذلك

وجدت خدعة بسيطة ...

الحالة الحالية / الصفحة الحالية =>

Actions.pop () ؛
setTimeout (() => {
Actions.refresh ({
isRefresh: صحيح ،
}) ؛
} ، 0) ؛

الحالة / الصفحة السابقة => داخل العرض أضف الشرط أدناه ،

إذا (this.props.isRefresh) {
Actions.refresh ({
isRefresh: خطأ ،
}) ؛
// إذا تم استدعاء حالة تعيين هنا ، فسيتم إعادة عرض نفسه تلقائيًا ...
this.setState ({isloading: true}) ،

شكرا.
}