4

每当我从我的应用程序进行 api 调用时，我想显示进度/活动指示器，但我找不到正确的解决方案。我可以显示活动指示器，但无法将其隐藏。这是我的代码：

StatusModal.js

constructor(props) {
 super(props)
 // set state with passed in props
 this.state = {
   message: props.error,
   hide: props.hide,
   animating: props.animating
 }
}

render() {  
 if(this.state.animating){
   return(
     <ActivityIndicator
       animating={true}
       size="small"
      />
   )
 }else{
   return(
     <View>
     </View>
   )
 }
}

这就是我如何改变动画状态

//show activity
Actions.statusModal({animating: true})

//hide activity
Actions.statusModal({animating: false})

这是我的场景结构：

<Scene key="modal" component={Modal} >
 <Scene key="root">
 <Scene key='login' component={Login} title='Login Page' hideNavBar={true} />
 </Scene>
 <Scene key="statusModal" component={StatusModal} />
</Scene>

如何从操作中隐藏活动指示器？

4

1 回答 1

3

应用程序处理加载是很常见的事情。处理它的最简单方法是为此创建一个单独的减速器。例如：

    功能appStateReducer（状态= {加载：假}，动作）{
        开关（动作。类型）{
          案例“SET_LOADING”：
            返回{加载：action.payload}；
          默认：
            返回{加载：假}；
        }
    }

    ...
    const rootReducer = combineReducer(
       ...其他减速机，
       应用程序：appStateReducer
    );
    ...

稍后您可以在组件中使用它。

...

    const mapStateToProps = (状态) => ({
        加载：state.app.loading，
    });

    @connect(mapStateToProps)
    类 MyScene 扩展组件 {
    ...

    使成为（） {
       常量 { 加载 } = this.props;
       如果（加载）{
       返回 （
           
         );
        }
        返回 ;
    }

SET_LOADING在查询开始时分派动作，最后或出现错误时true分派SET_LOADING为假。

但是处理加载的单一状态对于大型应用程序来说是不够的。例如：您需要处理对 API 的并行查询，并为每个查询显示加载器。然后，您将需要其他减速器中的此类字段。

顺便说一句，您肯定会遇到异步流的问题。我会推荐诸如redux-thunk、redux-saga和redux-observable这样的中间件。

我最喜欢的是 redux-saga。这是一种非常强大的方式来控制您的异步流程和应用程序中的所有其他副作用。

我希望它有所帮助。

于 2016-12-21T07:30:30.440 回答