React-native-router-flux: قم بتعيين navigationBarStyle بشكل ديناميكي في خطاف دورة حياة المشهد

وبالمثل ، فإنني أتطلع إلى استخدام الزر الأيمن الديناميكي على شريط التنقل الذي يعرض ورقة إجراءات بإجراءات تعتمد على البيانات. فكر ... Follow userABC123 ؛ Block userABC123 ؛ إلخ. هل هناك طريقة لإنشاء وظيفة onRight ديناميكيًا ضمن رابط دورة الحياة (أي بعد جلب البيانات) لإنتاج ورقة إجراءات مخصصة؟

نعم ، يمكنك تحديث الدعائم عبر Actions.refresh (). مثال:
Actions.refresh ({renderRightButton: this._renderRightButton}) ؛
https://github.com/aksonov/react-native-router-flux/blob/master/docs/OTHER_INFO.md

sheparddw هو الصحيح. بنفس الطريقة يمكنك تحديث navigationBarStyle بـ Actions.refresh({navigationBarStyle ... }) .

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

المكون الوحيد الذي يتم تحديثه عندما أقوم بالتبديل بين علامات التبويب هو شريط علامات التبويب الخاص بي ، لذلك حاولت وضع التحديث في مكون Tabbar في componentWillReceiveProps أو componentWillUpdate . ثم أحصل على عودية لا نهائية لأنه في كل مرة يتم تحديثها ، يحصل Tabbar على دعائم جديدة ويتم تحديثه مرة أخرى.

aksonov هل تمانع التعليق على هذا؟

كنت ألعب مع Actions.fresh في المكون الخاص بي ، لكنني لا أعتقد أن هذه هي الطريقة الصحيحة لتحديث خصائص المشهد ديناميكيًا. هذه هي النتائج التي توصلت إليها.

// ملاحظة: أنا أستخدم فئة es6 التي توسع المكون

إذا وضعنا Actions.refresh ({title: 'drawer'}) ؛ في المنشئ ، ثم رد على الشكوى مع هذا:

تحذير: setState (...): لا يمكن التحديث أثناء انتقال الحالة الحالية (مثل داخل render أو منشئ مكون آخر). يجب أن تكون طرق التقديم وظيفة خالصة للدعائم والحالة ؛ الآثار الجانبية للمُنشئ هي مضاد للنمط ، ولكن يمكن نقلها إلى componentWillMount .

هذا مجرد تحذير ونحقق النتيجة المرجوة. ومع ذلك ، هناك تأثير جانبي - يتم استدعاء وظيفة العرض مرتين عندما نقوم بذلك.

إذا وضعنا هذا مباشرة في وظيفة componentWillMount ، فلن يصدر رد الفعل أي تحذير ، ولكن يُستدعى العرض مرتين أيضًا.

إذا قمنا بذلك في المُنشئ:
this.props.navigationState.title = 'test';

ثم رد لن يشكو وسيتم اختبار عنوان شريط التنقل الخاص بنا. سيتم استدعاء طريقة العرض مرة واحدة فقط. الشيء نفسه ينطبق على استدعاء onRight و onRightTitle وما إلى ذلك. الآن الشيء وفقًا لهذا https://facebook.github.io/react/docs/jsx-spread.html#mutating -props-is-bad mutating props يعد أمرًا سيئًا.

لذلك ، يمكنك إما تغيير الخاصيات التي هي سيئة أو يمكنك استدعاء Actions.refresh ولها آثار جانبية ، مثل عرض المكون مرتين ... أي أفكار؟

أي تحديثات على هذا؟ أواجه نفس المشكلة بالضبط أثناء محاولة تعيين navigationBarStyle ديناميكيًا اعتمادًا على دعائم المستخدم. على وجه التحديد ، أحاول تغيير لون خلفية شريط التنقل. Actions.refresh({navigationBarStyle ... }) لا يعمل أيضًا.

<Scene key="myScene"
component={myComponent}
renderTitle={() => { return <NavigationBarTitle title="My Title"/>}}
sceneStyle={styles.scene}
navigationBarStyle={[styles.navBar, this.props.theme.backgroundColor]} <- لا يتم تحديث لون الخلفية عندما تتغير الحالة
onRight={this.pushNoticeFilter}/>

لقد تمكنت من عرض عناوين وأنماط مختلفة ديناميكيًا في مكون العنوان المخصص الخاص بي في شريط التنقل ، لكن navigationBarStyle لا يستمع إلى تغييرات الحالة.

هل هذا له علاقة بتجاهل RNRF إعادة تصيير المشاهد ، حيث تطبع "Key myScene محدد بالفعل!"؟

mikaelrosquistcompojoom أنا باستخدام مسترجع لتخزين "الموضوعات" أنني جلب من الخادم. أسهل طريقة وجدتها للقيام بأنماط شريط التنقل الديناميكي لإنشاء مكون غلاف فقط.

import React, { Component } from 'react';
import { NavBar } from 'react-native-router-flux';
import Variables from 'market/app/styles/base';

class CircllyNavBar extends Component {
  render() {
    return (
      <NavBar {...this.props} navigationBarStyle={{ backgroundColor: Variables.BRAND_PRIMARY() }} />
    )
  }
}

export default CircllyNavBar;

<Scene key="search_form" title="Search"
    component={SearchForm}
    navBar={CircllyNavBar} />

OhaiBBQ شكرا لك! يعمل بشكل مثالي! 👍

تضمين التغريدة هناك شيء آخر وجدته مثيرًا للاهتمام (لأنني جديد في React) ، وهو أنه يمكنك تعيين الخصائص الافتراضية لمشهد RNRF باستخدام خاصية فئة defaultProps لمكون React.

class Scene extends RNRFScene { }

Scene.defaultProps = {
  navBar: CircllyNavBar
};