ExNavigation - माता-पिता घटक से या renderRight

Question

से मैं अपने Exponent परियोजना में ExNavigation उपयोग कर रहा हूँ पहुँच नाविक।

मैं कैसे मार्ग घटकों बाहर से नेविगेशन कर सकते हैं?

तो एक ही जगह से मैं बनाने

<NavigationProvider router={router}> 
    <StackNavigation initialRoute={router.getRoute('First')}/> 
</NavigationProvider> 

मैं एक navigator पर पहुंच चाहते हैं ताकि मैं push और pop कर सकते हैं।

एक अन्य विकल्प First घटक अंदर से पुश करने के लिए है, लेकिन मुझे लगता है कि कर रहा हूँ renderRight घटक है, जो मेरी static route अंदर घोषित किया जाता है तो मैं this.props.navigator लिए पहुँच नहीं है में।

मैं भी माता-पिता (जो <NavigationProvider>... वाणी) से मार्ग घटकों के लिए रंगमंच की सामग्री पारित करने के लिए एक तरह से करना चाहते हैं।

क्या इनमें से कोई भी संभव है?

नोट: मैं इस के लिए Redux दुकान का उपयोग नहीं करते करना चाहते हैं। स्पष्ट रूप से मैं वैश्विक कार्य के साथ कुछ हासिल कर सकता हूं।

Answer 1

आप अपने 'पहले' घटक से ऐसा कर सकता है। और आपको रेंडर राइट बटन से क्लिक किए गए ईवेंट को उत्सर्जित करने के लिए इवेंट एमिटर का उपयोग करना होगा, उस ईवेंट को अपने पहले घटक में पकड़ें और वहां से नया मार्ग दबाएं। आप इसका उपयोग कर प्रोप पास करने में सक्षम होंगे। यहां समाधान है।

पहले renderRight बटन वर्ग को परिभाषित।

var EventEmitter = require('EventEmitter'); 

class NextButton extends React.Component { 
    constructor(props) { 
    super(props); 
    this.nextPressed = this.nextPressed.bind(this); 
    this.getView = this.getView.bind(this); 
    } 

    render() { 
    return(
     this.getView() 
    ); 
    } 

    getView() { 

     return (
     <TouchableHighlight 
      onPress={this.nextPressed} 
      underlayColor='transparent' 
      style={Styles.rightBarButton}> 
      <Text 
      style={[Styles.rightBarButtonText, Styles.fontStyle, {color:'#6A6A6A'}]}>Next</Text> 
     </TouchableHighlight> 
    ); 
    } 

    nextPressed() { 
    console.log("nextPressed CALLED!"); 
    this.props.emitter.emit('nextpressed'); 
    } 
} 

फिर इसे 'प्रथम घटक' के अंदर अपने रेंडर राइट बटन के रूप में उपयोग करें। इसके अलावा, आपको निकाल दिया गया ईवेंट पकड़ने और अगले घटक को धक्का देने की आवश्यकता है।

class First extends Component { 

    static route = { 
    navigationBar: { 
     title: 'FIRST SCREEN', 
     titleStyle: [Styles.navigationBarTitle, Styles.fontStyle], 
     tintColor: '#000', 
     renderRight: ({ config: {eventEmitter} }) => (<NextButton emitter={eventEmitter}/>) 
    }, 
    } 

constructor(props) { 
    super(props); 
    this.pressedEventCallback = this.pressedEventCallback.bind(this); 
} 

... 

componentWillMount() { 

    this._buttonPressSubscription = this.props.route.getEventEmitter().addListener('nextpressed', this.pressedEventCallback); 
} 

componentWillUnmount() { 

    this._buttonPressSubscription.remove(); 
    } 

... 

    pressedEventCallback() { 
    this.props.navigator.push(Router.getRoute('Second', {prop1: prop1, prop2: prop2})); 
    } 

... 
} 

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

Answer 2

एक और विकल्प पहले घटक के अंदर से धक्का देना है, लेकिन मैं इसे रेंडर राइट घटक में कर रहा हूं, जिसे मेरे स्थिर मार्ग के अंदर घोषित किया गया है, इसलिए मुझे इस.props.navigator तक पहुंच नहीं है।

@withNavigation सजावट का उपयोग करके आप this.props.navigator तक पहुंच सकते हैं। यहां LogoutButton बटन का एक उदाहरण दिया गया है, जिसका उपयोग आप renderRight में कर सकते हैं।

import React, {Component} from "react"; 
import {AsyncStorage, Button} from "react-native"; 
import Router from "../../Router"; 
import {withNavigation} from "@exponent/ex-navigation/src/ExNavigationComponents"; 

@withNavigation 
export default class LogoutButton extends React.Component { 
    render() { 
    return (
     <Button 
      title='Log out' 
      onPress={()=>{this.doLogout()}}/> 
    ) 
    } 

    doLogout() { 
    AsyncStorage.clear(); 
    this.props.navigator.immediatelyResetStack([Router.getRoute('login')], 0) 
    } 
}