如何使用 React Native 和 React Navigation 处理屏幕转换期间的状态
在从一个屏幕转换到另一个屏幕时,我收到一个对象未​​定义异常。我很清楚发生了什么,只是不确定是否有一种干净的方法来处理它,而不只是检查所有地方的未定义。
这是我的场景:
- 源屏幕引用 Redux 存储中的用户对象
- 从源屏幕到目标屏幕启动导航。
- 调用目标屏幕 componentDidMount(),我从 Redux 存储中清除用户对象。
- 再次调用源屏幕 render(),由于我从存储中清除了用户,因此发生未定义错误。
我假设源屏幕和目标屏幕由于转换而有一些重叠。我尝试添加监听器,但没有成功。我只能让侦听器处理程序为 type = action 触发,
我可能把这个问题弄得比实际更复杂了,但我想知道是否有标准的方法来处理这个问题,或者我是否以完全错误的方式处理这个问题。
此外,我的 react-navigation 是按照 React Navigation 网站和 Redux React Navigation 示例代码上的说明与 Redux 集成的。
这是基本代码。
屏幕 1
componentDidMount() {
// This is a Redux action that sets an object called user to null
clearUser();
{
屏幕 2
render() {
return (
// Other code here
// user is null here because render gets called after Screen1#componentDidMount() gets called
<Text>{user.firstName + ' ' + user.lastName}</Text>
<TouchableOpacity
onPress={() => navigation.dispatch({ type:'NAV_SCREEN_1' })}
>
// button code here
</TouchableOpacity>
// Other code here
)
}
错误类型为“TypeError:无法读取 null 的属性‘firstName’”
我理解这个错误以及为什么我会收到它。用户对象已由屏幕 1 的 componentDidMount() 中的 Redux 操作设置为 null,然后 Redux 导致调用屏幕 2 的渲染,该渲染引用了为 null 的用户对象。
我的问题是,有没有一种特殊的方法可以适应这种行为,而不必在每个需要使用用户对象的地方检查它是否为 null?我应该在其他地方调用 clearUser() 吗?
对于最新版本的
react-navigation
,您可以使用
addListener
、
withNavigationFocus
或
isFocused
来检测屏幕的过渡状态。
另一种非官方方式是捕捉动作类型
NavigationActions.COMPLETE_TRANSITION
,以防使用像
redux-saga
这样的中间件。
作为替代方案,您可以简单地使您的redux连接屏幕手柄未定义或无效状态。我也有类似的问题,当用户状态不确定时,我最终渲染了加载程序,而不是屏幕内容。当我登录时,屏幕显示了一秒钟的加载程序,然后将应用程序导航。