使用带有导入组件 React-native 的 stack Navigator答案

【问题标题】：Using stack Navigator with imported component React-native使用带有导入组件 React-native 的 stack Navigator
【发布时间】：2017-09-04 08:10:47
【问题描述】：

我对 react-native 很陌生，我一直在尝试导航。我在自己的 .js 文件中有 4 个组件类。 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() 函数作为“onBook”函数作为道具传递给 Moviepopup.js，并在 Moviepopup.js 中的按钮的 onPress 方法上调用，如下所示：

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

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

</TouchableHighlight>

我需要帮助编写 bookTicket 函数以使导航正常工作。

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

你不能像这样调用 onBook，你需要从你的组件的 props 中获取它：

 onPress={this.props.onBook}

这应该可以完成工作。如果没有，我们将需要查看更多代码

要在单击按钮时将道具传递到另一个屏幕，您只需：

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

有关如何使用导航器的更多信息，请访问React Navigation doc

【讨论】：

谢谢我缺少的东西。