代码之家  ›  专栏  ›  技术社区  ›  Eugene

全屏加载后报警指示灯

  •  1
  • Eugene  · 技术社区  · 6 年前

    我需要在处理请求时显示全屏加载指示器,如果请求失败,我可能需要显示 Alert 加载指示器关闭后立即显示错误消息。使用 Modal 警觉的 which is a known issue .

    为了解决这个问题,我创建了一个 View ProgressHUD App 所有其他组件下面的子组件如下:

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

    前进HUD . 我在用 redux-saga 前进HUD 应用程序 组成一个类似 LayoutComponent redux 储存观察一些 isLoading 旗帜,但这将需要我添加一个额外的行动,我的每一个传奇,这将使他们混乱。理想情况下,我想控制 在每个需要使用它但在其中渲染它的屏幕中,将在导航栏下方/选项卡栏上方渲染。有没有办法,也许,呈现一个 查看 在通过 react-navigation navigator ? 任何关于如何处理这一问题的建议都将不胜感激。

    1 回复  |  直到 6 年前
        1
  •  1
  •   Pritish Vaidya    6 年前

    既然你已经在用 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
      }
    }
    

    或者

    制造 对于 例如

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