全屏加载指示器后发出警报答案

【问题标题】：Alert after fullscreen loading indicator全屏加载指示器后发出警报
【发布时间】：2019-02-23 14:49:15
【问题描述】：

我需要在处理请求时显示全屏加载指示器，以防请求失败，我可能需要在加载指示器关闭后立即显示带有错误消息的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 显示的屏幕内在整个应用程序的窗口上呈现View？任何有关如何处理此问题的建议将不胜感激。

【问题讨论】：

我遇到了同样的挑战，我最终在 RootNavigation 上使用了 ProgressHUDComponent 和 redux。在react-navigation header 之上渲染Model 的唯一方法是使用react-native Model component。

标签： reactjs react-native react-native-ios

【解决方案1】：

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

考虑到诸如loadingOverlayVisible 之类的操作会触发Modal 和loading indicator

你可以在你的传奇中自定义它，你将它作为

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
  }
}

【讨论】：