Question

每当我从我的应用程序发出api调用时，我想显示progress / activityindicator，但我找不到正确的解决方案。我可以显示activityindicator但我无法将其隐藏起来。这是我的代码：

StatusModal.js

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

这是我的场景结构：

"categoryAxis": {
   "gridPosition": "start",
   "gridAlpha": 0,
   "tickPosition": "start",
   "tickLength": 20,
   "autoWrap": true
}

如何隐藏活动中的活动指标？

Answer 1

应用程序处理加载很常见。处理它的最简单方法是为此创建一个单独的reducer。 E.g：


    function appStateReducer(state = { loading: false }, action) {
        switch(action.type) {
          case "SET_LOADING":
            return { loading: action.payload };
          default:
            return { loading: false };
        }
    }

    ...
    const rootReducer = combineReducer(
       ...otherReducers,
       app: appStateReducer
    );
    ...

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


...

    const mapStateToProps = (state) => ({
        loading: state.app.loading,
    });

    @connect(mapStateToProps)
    class MyScene extends Component {
    ...

    render() {
       const { loading } = this.props;
       if (loading) {
       return (
           
         );
        }
        return ;
    }

使用SET_LOADING在查询开始时调度操作true，并在最后或出现错误时调度SET_LOADING为假。

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

顺便说一下，你肯定会遇到异步流的问题。我建议使用redux-thunk，redux-saga和redux-observable这样的中间件。

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

我希望它有所帮助。

如何在反应原生redux中显示和隐藏activityindicator？

1 个答案: