ExNavigation - 親コンポーネントまたはrenderRightからナビゲータにアクセス

Question

私のExponentプロジェクトにExNavigationを使用しています。

ルートコンポーネントの外からナビゲーションを行うにはどうすればよいですか？

だから同じ場所から、私は

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

私はnavigatorにアクセスしたい作成し、私はpushとpopことができるように。

別のオプションは、Firstコンポーネント内からプッシュすることですが、私は私のstatic route内で宣言されrenderRightコンポーネント、で私はthis.props.navigatorへのアクセスを持っていないことをやっています。

また、親からルートコンポーネントに小道具を渡す方法（<NavigationProvider>...を宣言した人）が必要です。

これは可能ですか？

注：これはReduxストアを使用したくないです。明らかに私はグローバルな機能で何かを達成することができます。

Answer 1

「最初の」コンポーネントからこれを実行できます。そして、イベント・エミッターを使用して、renderRightボタンからクリックされたイベントを送出し、最初のコンポーネントでそのイベントを捕捉し、そこから新しいルートをプッシュする必要があります。これを使って小道具を渡すこともできます。ここに解決策があります。

まず、renderRightボタンクラスを定義します。

これを「最初のコンポーネント」内のrenderRightボタンとして使用します。また、発生したイベントをキャッチして、次のコンポーネントをプッシュする必要があります。

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

もう1つのオプションは、最初のコンポーネントの内部からプッシュすることですが、私はthis.props.navigatorにアクセスできないように静的ルート内で宣言されているrenderRightコンポーネントでこれを行います。

this.props.navigatorにアクセスするには、@withNavigationデコレータを使用します。ここでは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) 
    } 
}