将自定义 JavaScript 注入 React Native 的 Web 视图

Question

我想将javascript代码注入到remacnative web view的injectedJavaScript方法中。我可以注入一个 JavaScript 代码工作正常，但多个不能。有什么技巧可以做到这一点吗？

injectedJavaScript={`document.querySelector('.header-wrapper').style.display='none' ` }

这行得通。

但是我想要这样的东西来注入多个javasript的东西，但不起作用。

let  jsCode = `(
function() {
document.querySelector('.footer').style.display='none' ;
document.querySelector('.tabs').style.display='none' ;
document.querySelector('.header-wrapper').style.display='none' ;
document.querySelector('.wrapper').style.margin-top=-70px ;
})();`;
render() {
return (
<WebView
source={{uri: 'blabla.com'}}
style={{marginTop: 20}}
injectJavaScript={jsCode}
javaScriptEnabledAndroid={true}
/>
);
}

当我尝试这个时，我得到了意想不到的令牌等。我如何注入多个 javascript 来响应本机 Web 视图？提前谢谢。

完整代码 ：

import React from 'react';
import { StyleSheet, Text, View,WebView } from 'react-native';
export default class App extends React.Component {


render() {
return (
<WebView
source={{uri: 'https://trends.google.com/trends/trendingsearches/daily?geo=TR'}}
injectedJavaScript={`document.querySelector('.trending-searches-footer').style.display='none';`
+ ` document.querySelector('.content-header-buttons daily-header-buttons').style.display='none'; `
+ `  document.querySelector('.trending-feed-tabs').style.display='none'; `
+ ` document.querySelector('.header-wrapper').style.display='none'; `
+ ` document.querySelector('.trending-feed-page-wrapper').style.marginTop='-70px'; `
}
javaScriptEnabled={true}
ref="WEBVIEW_REF"
/>
);
}
}

Answer 1

你的 javascript 中有一个错误，这将导致脚本失败：

document.querySelector('.wrapper').style.margin-top=-70px; // this is wrong syntax

试试这个

document.querySelector('.wrapper').style.marginTop='-70px';

要将其与注入的Javascript一起使用，请像一行一样编写脚本，这没有任何区别，但是您应该确保您的javascript没有任何错误：

let  jsCode = `
document.querySelector('.footer').style.display='none';
document.querySelector('.tabs').style.display='none';
document.querySelector('.header-wrapper').style.display='none';
document.querySelector('.wrapper').style.marginTop='-70px';
`;

并且使用注入JavaScript而不是注入JavaScript来使用它。

<WebView
source={{uri: 'blabla.com'}}
style={{marginTop: 20}}
injectedJavaScript={jsCode}
javaScriptEnabledAndroid={true}
/>