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

Question

我正在尝试在我的 React Native 应用程序中使用模式。我从不同的依赖关系中得到了两种不同的模式。一种仅适用于 IOS 和 Android，另一种仅适用于 Web。因此，我尝试在导入它时对其进行重命名，并在显示模式之前检查平台。不幸的是这不起作用。这是我尝试过的。

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

根据文档，没有名为“web”的值，它是其中之一'ios' | '安卓' | '本地' | '默认'所以你有两个选择要么使用 {Platform.OS === 'default' ？并将其用作网络或以其他方式使用 {Platform.OS === 'ios' || Platform.OS === 'android' 并渲染移动模态您当前的白屏问题是因为所有 3 个场景都打开了移动模式