如何在 React Native 中使用从不同依赖项导入的两个不同模态框？

Question

我正在尝试在我的 React 本机应用程序中使用模态。我从不同的依赖项中得到了两种不同的模态。一个仅适用于 IOS 和 Android，另一个仅适用于网络。因此，我尝试在导入时重命名一个，并在显示模态之前检查平台。不幸的是，这不起作用。这是我尝试过的。

import { Platform, Modal} from 'react-native';
import {Modal as WebModal} from 'modal-react-native-web';

<View>
   {Platform.OS === 'web' ?
      <WebModal
          animationType="slide"
          visible={this.state.addScheduleVisible}
          onRequestClose={() => this.toggleAddScheduleModal()}
      >
          <AddSCheduleModal closeModal={() => this.toggleAddScheduleModal()} />
      </WebModal>
     :
     <Modal
          animationType="slide"
          visible={this.state.addScheduleVisible}
          onRequestClose={() => this.toggleAddScheduleModal()}
      >
          <AddSCheduleModal closeModal={() => this.toggleAddScheduleModal()} />
      </Modal>
</View>

移动模式运行良好，但当我运行它没有任何错误消息时，它只在网络上显示一个白页。请问我该怎么办？

Answer 1

根据 documentation 没有名为 'web' 的值是其中之一

'ios' | 'android' | 'native' | 'default'

所以你有两个选择

要么使用 {Platform.OS === 'default' ？并将其用作网络或者换一种方式 {Platform.OS === 'ios' || Platform.OS === 'android' 并渲染移动模式

您当前的白屏问题是因为3个场景都打开了移动模态

如何在 React Native 中使用从不同依赖项导入的两个不同模态框？

How can I use two different Modals imported from different dependencies in React Native?

javascript

react-native

react-modal

expo