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

Question

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

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

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