React Native WebView变量传递问题：模板字面量方式失效求助

崩溃原因 #

你直接在模板字面量中插入数组${arr}时，JavaScript会自动将数组转为字符串，["something"]会变成something（无引号和方括号）。最终生成的注入代码是：

let webviewArr = something

这里的something会被当作未定义的变量，WebView执行这段代码时会抛出ReferenceError，直接导致应用崩溃。

修复方法 #

需要把数组序列化为合法的JSON字符串，再插入到模板字面量中，确保生成的代码是有效的JavaScript语法。使用JSON.stringify()处理数组即可：

const arr = ["something"]

// 用JSON.stringify将数组转为标准JS数组字面量字符串
const injectedJS = `let webviewArr = ${JSON.stringify(arr)}`

return (
<WebView
        scalesPageToFit={false}
        mixedContentMode="compatibility"
        injectedJavaScript={injectedJS}
        src={{ html: `some html here` }}
  />
)

这样生成的注入代码是let webviewArr = ["something"]，完全符合JS语法，能正常在WebView中执行。

为什么硬编码正常 #

硬编码时你直接写的是完整的数组字面量["something"]，本身就是合法的JS代码，自然不会有语法错误。而通过变量插入时，必须确保插入后的整体代码语法正确，JSON序列化就是最可靠的方式。

内容的提问来源于stack exchange，提问作者DingleberrySmith