我可以在React Native中专门为iOS设置一个模块吗?

13 android ios react-native

我目前react-native-safari-view在我的React Native项目中使用模块在iOS中显示Web视图.

由于该模块尚未针对Android实现,当我尝试为Android构建项目时,它会在此行给出错误:

import SafariView from 'react-native-safari-view'
Run Code Online (Sandbox Code Playgroud)

我将使用LinkingAndroid 的库,但我不知道如何在两个平台上使用相同的代码.

我试过了:

if (Platform.OS == 'ios') {
    import SafariView from 'react-native-safari-view'
}
Run Code Online (Sandbox Code Playgroud)

它给了我这个错误:

导入'和'导出'可能只出现在顶层

我该如何解决这个问题?

Dav*_*vid 13

为了解决这个问题,我一直在使用require(但主要用于模块而不是组件):

var SafariView;

if (Platform.OS == 'ios') {
    SafariView = require('react-native-safari-view');
}
Run Code Online (Sandbox Code Playgroud)

对于这种特殊情况,我肯定会选择康斯坦丁·库兹涅佐夫的方法 - 只是坚持这一点,因为它可能会帮助其他人制作包装组件与单独的文件可能是矫枉过正:)

  • 在我的情况下,我不得不在导入的末尾添加`.default`.在这种情况下,它将是:`SafariView = require('react-native-safari-view').default;` (4认同)

Hus*_*urd 7

特定于平台的代码更加复杂,您应考虑将代码拆分为单独的文件。React Native将检测文件何时具有.ios。或.android。扩展并在需要时从其他组件加载相关平台文件。

例如,假设您的项目中包含以下文件:

BigButton.ios.js
BigButton.android.js
Run Code Online (Sandbox Code Playgroud)

然后,您可以要求该组件如下:

import BigButton from './BigButton'
Run Code Online (Sandbox Code Playgroud)

参考 https://facebook.github.io/react-native/docs/platform-specific-code.html#platform-specific-extensions


Kon*_*sov 5

您可以通过创建两个不同的文件单独的平台代码your_file_name.android.jsyour_file_name.ios.js.因此,您可以为要使用的文件创建两个版本,SafariView或者您可以创建一个包装器SafariView,将在iOS上导出此模块并在Android上导出虚拟对象,然后使用此包装器进行Platform.OS检查.