react native web view set source 三元

Question

我有一个 react native 项目正在运行，在 webview 上显示内部 HTML，

如果我保留源的 iOS 或 android 路径，则 Web 视图呈现良好

但是应用于三元比较时，没有设置源？

所以这行得通：

      <WebView
    style={styles.webContainer}
    originWhitelist={['*']}
    source={HTML_FILE}
    javaScriptEnabled={true}
        domStorageEnabled={true}

  />

但是如果我做一个三元来知道是android还是ios源...

      <WebView
    style={styles.webContainer}
    originWhitelist={['*']}
    source={isAndroid? {uri:'file:///android_asset/nano.html'} : {HTML_FILE}}
    javaScriptEnabled={true}
        domStorageEnabled={true}

  />

然后它不会渲染，

那么我如何检查是 android 还是 ios 并更改我的 web 视图的源？

编辑 1 来源={this.getSource()}

 getSource = ()=>{
  if(isAndroid){
   return {uri:'file:///android_asset/nano.html'}
  }
 return {HTML_FILE}
 }

不工作？？为什么？，看来我必须直接在webview上设置源

Answer 1

看起来是语法错误。您的工作代码暗示 HTML_FILE 本身足以作为传递给 source 属性的值：

<WebView
  style={styles.webContainer}
  originWhitelist={['*']}
  source={HTML_FILE}
  javaScriptEnabled={true}
  domStorageEnabled={true}
/>

这意味着在你的三元组中，你不应该用{} 包围它。相反，假设isAndroid 是正确的，这应该没问题：

<WebView
  style={styles.webContainer}
  originWhitelist={['*']}
  source={isAndroid ? {uri:'file:///android_asset/nano.html'} : HTML_FILE}
  javaScriptEnabled={true}
  domStorageEnabled={true}
/>

说明

让我们假设HTML_FILE 是某个具有某些值的变量：

const HTML_FILE = { uri: 'some string' };

当三进制写成这样：

isAndroid ? {uri:'file:///android_asset/nano.html'} : {HTML_FILE}

尝试解析 else 部分，它将返回 {HTML_FILE} 作为值。 JavaScript 将使用 property value shorthand 对此进行评估，并返回如下所示的对象：

{
  HTML_FILE: { uri: 'some string' }
}

请注意变量的名称如何成为结果对象中的键，而变量的值如何成为该键的值。

删除{}:

isAndroid ? {uri:'file:///android_asset/nano.html'} : HTML_FILE

将导致 else 部分返回 HTML_FILE 的值，这正是您最初分配的值。与 React 的常见混淆在于组件的 JSX 语法中您会看到如下内容：

source={HTML_FILE}

并相信封闭的{} 对所有变量都是必要的。不是这种情况。您可以使用它们来表示您将其值分配给道具的表达式。请参阅上面提到的Specifying Attributes with JSX（强调我的）：

您也可以使用花括号在属性中嵌入 JavaScript 表达式：

最初的{} 中的所有内容都应该是一个普通的JavaScript 表达式。

Answer 2

创建一个名为 getSource 的函数

getSource = ()=>{
 if(isAndroid){
  return {uri:'file:///android_asset/nano.html'}
 }
return {HTML_FILE}
}

然后这样设置

 source={this.getSource()}