Question

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

为解决此问题，我创建了一个基于View的{{1}}组件来显示加载指示符，并将其作为ProgressHUD组件的子组件放置在所有其他这样的组件下面：

App

指示器本身按预期工作，没有挂断。我现在面临的问题是决定如何切换此<View style={{ flex: 1 }}> <AuthScreensStack /> <ProgressHUD isLoading={false} /> </View>。我正在使用ProgressHUD中间件，所以我可能可以将redux-saga组件之外的ProgressHUD移到App之类的东西中，然后将其连接到LayoutComponent存储中，观察一些redux标志，但这将要求我向我的每个sagas添加一个附加操作，这会使它们混乱。理想情况下，我想在每个需要使用isLoading的屏幕中进行控制，但是在其中进行渲染将在导航栏下方/选项卡栏上方进行渲染。是否有办法从通过ProgressHUD的{{1}}显示的屏幕内在整个应用程序的窗口上渲染View？任何有关如何处理此问题的建议将不胜感激。

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

OR

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

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

1 个答案: