將堆棧導航器與導入的組件相結合React-native

我對react-native很新，我一直在嘗試導航。我有4個組件類，每個都在它自己的.js文件中。 App.js導入stackNavigator。 Movies.js導入另一個名爲MoviePopup.js的組件。 MoviePopup.js有一個按鈕，我想點擊打開一個確認屏幕（Confirmation.js）並傳遞一個隨機代碼。將堆棧導航器與導入的組件相結合React-native

裏面App.js我設置了stackNavigator如下：

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

應用導航以及電影頁面。電影裏面我寫了一個funtion 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 
    } 
}

我無法瀏覽該點導航到確認頁面。

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

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

</TouchableHighlight>

我需要幫助寫在了bookTicket功能：bookTicket（）函數爲道具，以Moviepopup.js爲「onBook」功能如下傳遞，並呼籲按鈕的內部Moviepopup.js的onPress方法導航才能正常工作。

來源

2017-09-03 Isaac Sekamatte

你不能只是調用onBook這樣，你需要從你的組件的道具獲得它：

onPress={this.props.onBook}

這應該做的工作。如果沒有，我們需要看到更多的代碼

要通過道具到另一個屏幕，當你點擊一個按鈕，你就必須做到：

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

有關如何使用導航儀的工作更多的信息你應該去React Navigation doc

來源

2017-09-04 00:10:47 Poptocrack

謝謝得到了我失蹤。 –

將堆棧導航器與導入的組件相結合React-native

回答

相關問題