全屏加载指示器后提醒

Question

我需要在处理请求时显示全屏加载指示器，以防请求失败我可能需要在加载指示器消失后立即显示 Alert 和错误消息。使用 Modal 显示加载指示器在 Android 上效果很好，但除非在关闭加载指示器和显示 Alert iOS 之间添加延迟，否则将挂断， which is a known issue.

为了解决这个问题，我创建了一个基于 View 的 ProgressHUD 组件来显示加载指示器，并将其作为 App 子组件放在所有其他组件下面，如下所示：

<View style={{ flex: 1 }}>
  <AuthScreensStack />
  <ProgressHUD isLoading={false} />
</View>

指标本身按预期工作，没有任何挂起。我现在面临的问题是决定如何切换 ProgressHUD。我正在使用 redux-saga 中间件，所以我可以将 ProgressHUD 组件从 App 组件移到 LayoutComponent 之类的东西中，并将其连接到 redux 存储观察一些 isLoading 标志，但这将需要我为每个 sagas 添加一个额外的动作，这会使它们变得混乱。理想情况下，我想在每个需要使用它的屏幕中控制 ProgressHUD，但在它们中呈现它会呈现在导航栏下方/标签栏上方。有没有办法，也许，在通过 react-navigation 的 navigator 显示的屏幕内，在整个应用程序的 window 上呈现 View？非常感谢任何有关如何处理此问题的建议。

Answer 1

由于您已经在使用 redux-saga，因此您可以将其链接到生成器中。

考虑 loadingOverlayVisible 等操作会触发 Modal 和 loading indicator

要么你可以在你的 saga 中自定义它，你将它触发为

export function * submit() {
  try {
    yield put(loadingOverlayVisible(true)) // Modal Open
    const result = yield call(sampleApiCall)
    yield put(loadingOverlayVisible(false)) // Modal Close
    if(result && result.ok) {
       yield call(Alert.alert, 'Success', 'Success Response') // Alert Called
       //... Other stuff
    }
  } catch(ex) {
    yield call(Alert.alert, 'Success', 'Success Response') // Alert Called
  }
}

或

为ajax做一个单独的中间件请求拦截器如

export function * interceptor({url, params}) {
  try {
    yield put(loadingOverlayVisible(true)) // Modal Open
    const result = yield call(sampleApiCall)
    yield put(loadingOverlayVisible(false)) // Modal Close
  } catch(ex) { 
    throw ex // Either handle it here or in your other generators
  }
}

全屏加载指示器后提醒

Alert after fullscreen loading indicator

reactjs

react-native

react-native-ios