Question

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

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

import SafariView from 'react-native-safari-view'

我将使用Android的Linking库，但我不知道如何在两个平台上使用相同的代码。

我试过了：

if (Platform.OS == 'ios') {
    import SafariView from 'react-native-safari-view'
}

它给了我这个错误：

import'和'export'可能只出现在顶层

我该如何解决这个问题？

Answer 1

为了解决这个问题，我一直在使用require代替（但主要是模块而不是组件）：

var SafariView;

if (Platform.OS == 'ios') {
    SafariView = require('react-native-safari-view');
}

对于这种特殊情况，我肯定会选择Konstantin Kuznetsov的方法 - 只是坚持这一点，因为它可能会帮助其他人制作带有单独文件的包装器组件可能有点过分：）

Answer 2

您可以通过创建两个不同的文件your_file_name.android.js和your_file_name.ios.js来分隔平台代码。因此，您可以为要使用SafariView的文件创建两个版本，或者您可以创建一个围绕SafariView的包装器，它将在iOS上导出此模块，在Android上导出虚拟对象，然后使用此包装器Platform.OS检查。

Answer 3

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

例如，假设项目中包含以下文件：

BigButton.ios.js
BigButton.android.js

然后您可以按如下方式要求组件：

import BigButton from './BigButton'

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

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

3 个答案: