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

Question

我正在尝试在我的本机应用程序中使用模态。 我从不同的依赖项中得到了两种不同的模态。 一种仅适用于 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 个场景都打开了移动模式