在 React Native 中管理多个模式的最佳实践

Question

我有一个屏幕，我需要在其中显示多个模式。例如，如果某个请求失败，那么我想显示错误模式，如果某个请求成功，那么我想显示成功模式。

我目前这样做，我认为这是不好的做法：

...

export default function SomeSampleScreen(props) {
  const [errorModalVisible, setErrorModalVisible] = useState(false);
  const [errorMessage, setErrorMessage] = useState('');
  const [successModalVisible, setSuccessModalVisible] = useState(false);
  const [successMessage, setSuccessMessage] = useState('');

  function showError(message) {
    setErrorMessage(message);
    setErrorModalVisible(true);
  }

  function showSuccess(message) {
    setSuccessMessage(message);
    setSuccessModalVisible(true);
  }

  return (
    <>
      <ErrorModal
        visible={errorModalVisible}
        onClose={() => {
          setErrorModalVisible(false);
        }}>
        {errorMessage}
      </ErrorModal>
      <SuccessModal
        visible={successModalVisible}
        onClose={() => {
          setSuccessModalVisible(false);
        }}>
        {successMessage}
      </SuccessModal>
      <View>
        ...
      </View>
    </>
  );
}

Answer 1

你可以将它压缩成一个对象：

export default function SomeSampleScreen(props) {
  const [modalState, setModalState] = useState({state: ''});

  function showError(message) {
    setModalState({state: "error", message});
  }

  function showSuccess(message) {
    setModalState({state: "success", message});
  }

  return (
    <>
      <ErrorModal
        visible={modalState.state === "error"}
        onClose={() => {
          setModalState({state: ''});
        }}>
        {modalState.message}
      </ErrorModal>
      <SuccessModal
        visible={modalState.state === "success"}
        onClose={() => {
          setModalState(false);
        }}>
        {modalState.message}
      </SuccessModal>
      <View>
        ...
      </View>
    </>
  );
}

UDP日期 在澄清实际问题是什么之后，这是一个很好的方法。 创建上下文：

const ModalContext = React.createContext({status: "", message: ""});

在树中的某个位置添加上下文和模态：

constructor(props) {
    super(props);

    this.setModal = (modalState) => {
      this.setState(state => ({...state, ...modalState}));
    };
    this.state = {
      status: "",
      message: "",
      setModal: this.setModal,
    };
  }
return <ModalContext.Provider value={this.state.modalState}>
        <RestOfApp />
        <Modals/>
      </ModalContext.Provider>

模态框将与您发布的内容类似：

export default function SomeSampleScreen(props) {
  const modalState = useContext(ModalContext);

  function showError(message) {
    modalState.setModal({state: "error", message});
  }

  function showSuccess(message) {
    modalState.setModal({state: "success", message});
  }

  return (
    <>
      <ErrorModal
        visible={modalState.state === "error"}
        onClose={() => {
          modalState.setModal({state: ''});
        }}>
        {modalState.message}
      </ErrorModal>
      <SuccessModal
        visible={modalState.state === "success"}
        onClose={() => {
          modalState.setModal(false);
        }}>
        {modalState.message}
      </SuccessModal>
      <View>
        ...
      </View>
    </>
  );
}

Answer 2

您可以使用

conditional render

返回

different data on the same modal

。 像这样：

export default function SomeSampleScreen(props) {
  const [ModalVisible, setModalVisible] = useState(false);
  const [errorMessage, setErrorMessage] = useState(false);
  const [successMessage, setSuccessMessage] = useState(false);

  function showError(message) {
    setErrorMessage(message);
    setModalVisible(true);
  }

  function showSuccess(message) {
    setSuccessMessage(message);
    setModalVisible(true);
  }

  return (
    <>
      <Modal
        visible={ModalVisible}
        onClose={() => {
          setSuccessModalVisible(false);
          setSuccessMessage(false);
          setErrorMessage(false);
        }}>

        {errorMessage && (
          {errorMessage}
        )}

        { successMessage && (
          {successMessage}
        )}

      </Modal>
      <View>
        ...
      </View>
    </>
  );
}

Answer 3

对于那些仍在寻找解决方案的人：

你可以试试这个库。这是原生解决方案，对模态数量没有限制

https://github.com/paufau/react-native-multiple-modals