React-native-router-flux: एक दृश्य के जीवनचक्र हुक में गतिशील रूप से नेविगेशनबार स्टाइल सेट करें

इसी तरह, मैं नेवबार पर एक डायनेमिक राइट बटन का उपयोग करना चाह रहा हूं जो डेटा पर निर्भर कार्यों के साथ एक एक्शन शीट प्रस्तुत करता है। सोचो... Follow userABC123 ; Block userABC123 ; आदि। क्या कस्टम एक्शन शीट बनाने के लिए जीवनचक्र हुक (यानी डेटा प्राप्त होने के बाद) के भीतर onRight फ़ंक्शन को गतिशील रूप से उत्पन्न करने का कोई तरीका है?

हां, आप Actions.refresh() के ज़रिए प्रॉप्स को अपडेट कर सकते हैं। उदाहरण:
क्रियाएँ। ताज़ा करें ({रेंडरराइटबटन: यह._रेंडरराइटबटन});
https://github.com/aksonov/react-native-router-flux/blob/master/docs/OTHER_INFO.md

@sheparddw सही है। उसी तरह आप navigationBarStyle को Actions.refresh({navigationBarStyle ... }) अपडेट कर सकते हैं।

आपको Actions.refresh() कॉल कहाँ रखना चाहिए?
जब मैं अपने फ्लक्स एक्शन में रीफ्रेश कॉल डालता हूं (जिसे शैली में बदलाव होने पर कहा जाता है) यह केवल वर्तमान में चयनित टैब पर नेवबार शैली को अपडेट करता है। जब मैं टैब स्विच करता हूं, तो यह पुरानी शैली में वापस आ जाता है।

जब भी मैं टैब स्विच करता हूं तो अपडेट होने वाला एकमात्र घटक मेरा टैबबार है, इसलिए मैंने अपने Tabbar घटक में componentWillReceiveProps या componentWillUpdate में रीफ्रेश डालने का प्रयास किया। तब मुझे अनंत रिकर्सन मिलता है क्योंकि हर बार जब यह ताज़ा होता है, तब्बार को नया सहारा मिलता है और यह फिर से ताज़ा हो जाता है।

@aksonov क्या आप इस पर टिप्पणी करना चाहेंगे?

मैं अपने घटक में Actions.refresh के साथ खेल रहा था, लेकिन मुझे नहीं लगता कि यह दृश्य के गुणों को गतिशील रूप से अद्यतन करने का सही तरीका है। यहाँ मेरे निष्कर्ष हैं।

// नोट: मैं एक es6 वर्ग का उपयोग कर रहा हूं जो घटक का विस्तार करता है

अगर हम Actions.refresh({title: 'drawer'}) डालते हैं; कंस्ट्रक्टर में, फिर इसके साथ शिकायत करें:

चेतावनी: सेटस्टेट (...): मौजूदा राज्य संक्रमण के दौरान अपडेट नहीं किया जा सकता (जैसे render या किसी अन्य घटक के निर्माता के भीतर)। रेंडर मेथड्स प्रॉप्स और स्टेट का शुद्ध कार्य होना चाहिए; कंस्ट्रक्टर साइड-इफेक्ट्स एक एंटी-पैटर्न हैं, लेकिन इसे 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 को कॉल कर सकते हैं और साइडइफेक्ट्स कर सकते हैं, जैसे कि कंपोनेंट को दो बार रेंडर करना ... कोई विचार?

इस पर कोई अपडेट? मुझे उपयोगकर्ता प्रोप के आधार पर नेविगेशनबार स्टाइल को गतिशील रूप से सेट करने का प्रयास करने में एक ही समस्या हो रही है। विशेष रूप से मैं नेविगेशन बार की पृष्ठभूमि का रंग बदलने की कोशिश कर रहा हूँ। 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}/>

मैंने नेविगेशन बार के अपने कस्टम शीर्षक घटक में विभिन्न शीर्षक और शैलियों को गतिशील रूप से प्रस्तुत करने में कामयाब रहा है, लेकिन नेविगेशनबार स्टाइल राज्य परिवर्तनों को नहीं सुन रहा है।

क्या इसका RNRF से कोई लेना-देना है, दृश्यों के पुन: प्रस्तुतीकरण को अनदेखा करना, जहां यह "कुंजी myScene पहले से ही परिभाषित है!" प्रिंट करता है?

@mikaelrosquist @compojoom मैं सर्वर से प्राप्त "थीम" को स्टोर करने के लिए

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 धन्यवाद! अच्छी तरह से काम! 👍

@mikaelrosquist कोई समस्या नहीं। एक और चीज जो मुझे दिलचस्प लगी (जैसा कि मैं रिएक्ट के लिए नया हूं), यह थी कि आप रिएक्ट कंपोनेंट की defaultProps क्लास प्रॉपर्टी का उपयोग करके RNRF सीन के डिफॉल्ट प्रॉप्स सेट कर सकते हैं।

class Scene extends RNRFScene { }

Scene.defaultProps = {
  navBar: CircllyNavBar
};