开发者问题收集

如何使用 React Native 和 React Navigation 处理屏幕转换期间的状态

2018-04-29
520

在从一个屏幕转换到另一个屏幕时,我收到一个对象未​​定义异常。我很清楚发生了什么,只是不确定是否有一种干净的方法来处理它,而不只是检查所有地方的未定义。

这是我的场景:

  1. 源屏幕引用 Redux 存储中的用户对象
  2. 从源屏幕到目标屏幕启动导航。
  3. 调用目标屏幕 componentDidMount(),我从 Redux 存储中清除用户对象。
  4. 再次调用源屏幕 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() 吗?

2个回答

对于最新版本的 react-navigation ,您可以使用 addListener withNavigationFocus isFocused 来检测屏幕的过渡状态。

另一种非官方方式是捕捉动作类型 NavigationActions.COMPLETE_TRANSITION ,以防使用像 redux-saga 这样的中间件。

blaz
2018-04-30

作为替代方案,您可以简单地使您的redux连接屏幕手柄未定义或无效状态。我也有类似的问题,当用户状态不确定时,我最终渲染了加载程序,而不是屏幕内容。当我登录时,屏幕显示了一秒钟的加载程序,然后将应用程序导航。

dols3m
2018-10-21