在异步函数中导航 - React Navigation - React Native

Posted

技术标签:

【中文标题】在异步函数中导航 - React Navigation - React Native【英文标题】:Navigating in Async function - React Navigation - React Native 【发布时间】:2020-06-19 00:39:20 【问题描述】:

我试图在 ReactNative 中从一个组件导航到另一个屏幕。但是越来越关注

可能的未处理的 Promise Rejection,TypeError: undefined is not an object (evaluating 'navigation.navigate')]

以下是我的代码,我在其中等待获取地点详细信息,然后想要导航到包含这些详细信息的另一个屏幕。

constructor(props) 
super(props)
this.state = status: 'initial'
this._handlePress = this._handlePress.bind(this);
 



_handlePress = async (navigation) => 
const res = await this.props.fetchDetails(this.props.place_id)
console.log('result', res.geometry.location.lat)
navigation.navigate("Home", selectedLocation: res.geometry.location);


我也尝试过this.props.navigation.navigate(),但无法解决这个问题。

我得到以下信息:

[未处理的承诺拒绝:TypeError:未定义不是对象(评估'_this.props.navigation.navigate')]

以下是完整的组件代码:Pastebin Link

【问题讨论】:

【参考方案1】:

使用 withNavigation 方法,因为您已经从 react-navigation 导入了它。

export default withNavigation(LocationItem);

如果未解决,则将导航作为已使用的道具传递。

<LocationItem navigation=this.props.navigation/>

【讨论】:

虽然我只是假设您在导航方面遇到问题,因为您没有提到。 我需要更多信息,您是否将此类用作其他类的组件?

以上是关于在异步函数中导航 - React Navigation - React Native的主要内容,如果未能解决你的问题,请参考以下文章

React Native - 在异步操作后导航

在 React-Native 中的非异步函数中调用异步函数 - Firebase

在 utils.js 文件(React-Native)中调用异步函数?

如何在 React 的 UseEffect() 中调用异步函数?

如何在 react redux 中使用异步函数

如何在“react-dropzone”的“onDrop”中使用异步等待? (解析错误:不能在异步函数之外使用关键字'await')