ExNavigation - 從父組件或renderRight訪問導航器

我在我的Exponent項目中使用ExNavigation。ExNavigation - 從父組件或renderRight訪問導航器

如何從路由組件外部進行導航？

所以從同一個地方我創建

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

我想訪問navigator讓我可以push和pop。

另一種選擇是從First組件內部的推動，但是我做的是，在renderRight組件，這是我的聲明裏面static route，所以我不必this.props.navigator訪問。

我也想要一種方式將道具傳遞給父路由組件（聲明<NavigationProvider>...）。

這是可能的嗎？

注：我不想爲此使用Redux商店。顯然，我可以通過全局功能來實現任何功能。

來源

2016-11-20 Rodrigo Ruiz

你可以從你的'第一'組件做到這一點。您將不得不使用事件發射器從renderRight按鈕發出單擊的事件，在第一個組件中捕獲該事件，並從那裏推送新路線。你也可以使用這個道具來傳遞道具。這是解決方案。

首先定義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'); 
    } 
}

然後用這個作爲你的renderRight按鈕在'First component'裏面。此外，您需要捕獲觸發的事件並推送下一個組件。

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})); 
    } 

... 
}

這種方式，你可以從按鍵火災事件，然後趕在你的組件，然後導航到通過道具以及其他屏幕或做任何你可以。請讓我知道這對你有沒有用。

來源

2017-01-13 03:02:56

另一種選擇是從第一個組件內部推入，但是我在renderRight組件中這樣做，這是在我的靜態路由中聲明的，所以我無法訪問this.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) 
    } 
}

來源

2017-01-13 09:35:44 sealskej

ExNavigation - 從父組件或renderRight訪問導航器

回答

相關問題