は、反応ネイティブ・ドロワーと反応ネイティブ・ルーター・フラックスを使用して別の画面にナビゲートできません。

Question

ナビゲーション・システムではreact-native-router-flux、サイドバーではreact-native-drawerを使用しています。ユーザーがサイドバーにあるメニュー項目をクリックすると、ユーザーを別の画面にリダイレクトして引き出しを閉じたいと思う。私は次のコードスニペットを使用しています。

​​

は、私は別の機能でそれを使用している場合は問題なく2番目のページ

の両方が動作しているを開くために引き出し

Actions.pageTwo.call()を閉じます。しかし、私は同じ機能から両方のスニペットをトリガーする場合。それは動作していません。事前に

おかげで、

Answer 1

私はこのシナリオを両方のライブラリで使用しています。高レベルでは、私が引き出しを閉じる責任を負う関数を渡すネイティブドロワーの内容をレンダリングするカスタムコンポーネントを作成します。それで私が引き出しアイテムの1つを押すと、反応するネイティブルータフラックスナビゲーションアクション（私の場合はPUSH）と、引き出しを閉じるために渡された関数を呼び出します。

ここに私の引き出しを定義するものがあります。 DrawerNavigationContenは、究極的にはListViewや、あなたが引き出しコンテンツのレンダリングを好む実装であることを覚えておいてください。ここで

class RootComponent extends Component { 
    ... 

    closeDrawer() { 
    this.drawerRef.closeDrawer(); 
    } 

    render() { 
    const drawerNavigationContent = (
     <DrawerNavigationContent 
     closeDrawer={this.closeDrawer.bind(this)} 
     /> 
    ); 

    return <Drawer 
     ref={(ref) => { this.drawer = ref; }} 
     content={drawerNavigationContent} 
     ... 
     > 
     ...here I define my react-native-router-flux scenes... 
     </Drawer> 
    ); 
    } 
    ... 
} 

はDrawerNavigationContent

import { Actions } from 'react-native-router-flux'; 

    class DrawerNavigationContent extends Component { 
    ... 

    navigate(location) { 
     Actions[location](); 
     this.props.closeDrawer(); 
    } 

    ... 

    render() { 
     ... 
     <TouchableOpacity onPress={this.navigate(...some dynamic scene key...)}> 
     ... 
     </TouchableOpacity> 
     ... 
    } 
    } 

Answer 2

私はreact-native-router-fluxと協力し、同様に引き出しいくつかの問題がありました。両方のシーンがとても

<Scene key="navigationDrawer" component={NavigationDrawer}> <Scene key="pageOne" component={PageOne}/> <Scene key="pageTwo" component={PageTwo}/> </Scene>

のように引き出しの子である場合は、ナビゲーション時に引き出しを閉じる必要がありActions.pageTwo({key: 'navigationDrawer', open: false})を使用することができます。

そうでなければ、PageTwoのcomponentWillMountまたはcomponentDidMountメソッドにActions.refresh({key: 'navigationDrawer', open: false)を使用できます。