インポートされたコンポーネントでスタックナビゲータを使用するReact-native

Question

私はかなりネイティブに反応し、ナビゲーションを試しています。 4つのコンポーネントクラスがそれぞれ独自の.jsファイルにあります。 App.jsは、stackNavigatorをインポートします。 Movies.jsはMoviePopup.jsという別のコンポーネントをインポートします。 MoviePopup.jsには、確認画面（Confirmation.js）を開き、ランダムなコードを渡すためにクリックしたいボタンがあります。

インサイドApp.js私のセットアップはstackNavigatorは次のように：

const TicketsApp = StackNavigator({ 
    Movies: { screen: MoviesList }, 
    Confirmation: { screen: Confirmation }, 
}); 

アプリケーションは、映画のページにも移動します。 インサイド映画は、私が目的球のbookTicketを書いた（）としては、次のとおりです。

bookTicket =() => { 
    if (!this.state.chosenTime) { 
    Alert.alert('Book Movie Error', 'Please select show time'); 
    } else { 
    this.closeMovie();//close popup 

    //I am supposed to navigate to comfirmation window here 
    //and pass a booking code as a prop to the confirmation window 
    //What code should I use here to make my navigation work 
    } 
} 

は、私はその時点での確認ページに移動するためにナビゲートすることができません。私はのためのbookTicket機能を書いて助けが必要

<TouchableHighlight 
    underlayColor="#9575CD" 
    style={styles.buttonContainer} 
    onPress={onBook} > 

    <Text style={styles.button}>Book My Tickets</Text> 

</TouchableHighlight> 

次のようにbookTicket（）関数は、Moviepopup.js内部のボタンのたonPress方法に「onBook」関数としてMoviepopup.jsに小道具として渡さと呼ばれていますナビゲーションが適切に機能するようにします。

Answer 1

あなたはちょうどあなたがあなたのコンポーネントの小道具からそれを取得する必要があり、そのようonBook呼び出すことはできません。

onPress={this.props.onBook} 

これが作業を行う必要があります。ない場合は、ボタンをクリックしたときに、私たちは別の画面に小道具を渡すには

より多くのコードを参照する必要があります、あなただけ行う必要があります：ナビゲータで作業する方法についての詳細情報については

onPress={() => this.props.navigation.navigate('YourPageName', {someProp: 'propContent'})} 

ます行くべきであるReact Navigation doc