按时间限制模态的最佳实践

Question

我正在用 React Native 构建一个简单的测验应用程序。当用户得到正确答案时，我想显示一个显示 'Congratz' 的弹出模式（React Native Elements）。我的工作方式如下：

<Overlay isVisible={{this.props.showModal}}>
  <Text>Congratz</Text>
</Overlay>

其中，showModal 是通过我的 Redux 和 Redux Thunk 操作中的调度设置的。但是，我想将其限制为只显示 2 秒然后消失。实现此目标的最佳做法是什么？

目前我的 thunk 动作是：

export const showModal = () => {
  return (dispatch, getState) => {
    dispatch({ type: "SHOW_MODAL" });
    var start = new Date().getTime();
    var end = start;
    while (end < start + 2000) {
      end = new Date().getTime();
    }
    dispatch({ type: "HIDE_MODAL" });
  };
};

但这会使系统锁定 2 秒？

Answer 1

我将使用简单的 setTimeout 函数来调度 HIDE_MODAL 调度后 SHOW_MODAL。

dispatch({ type: "SHOW_MODAL" });
setTimeout(() => dispatch({ type: "HIDE_MODAL" }), 2000);

按时间限制模态的最佳实践

Best practice to limit modal by time

react-native

redux-thunk

react-redux

react-native-elements