Question

我想将JavaScript代码注入到React Native Web视图的InjectionJavaScript方法中。我可以注入一个运行良好的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';

要将其与jectedJavascript结合使用，就像编写一行脚本一样，它不会产生任何区别，但是您应确保您的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';
 `;

然后使用jectedJavaScript而不是injectJavaScript来使用它。

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

将自定义JavaScript注入React Native的Webview中

1 个答案: