标签: react-native-webview

我正在尝试使用在 React Native 应用程序内的 web 视图中打开的页面的 postmessage。我尝试了很多次，但仍然无法发送。

我可以正常收听网页消息。我只是无法寄回任何东西。

我目前正在使用react-native-webview 11.6.5

export default function WebPage() {
  const webviewRef = useRef();

  const onMessage = (event) => {
    //receive message from the web page. working here until here
    const data = JSON.parse(event.nativeEvent.data);

    //reply the message
    webviewRef.current.postMessage(
      JSON.stringify({reply: 'reply'}),
      '*'
    )
  }

  return <View>
    <WebView
      ref={webviewRef}
      originWhitelist={['*']}
      source={{ uri: 'https://robertnyman.com/html5/postMessage/postMessage.html' }}
      domStorageEnabled
      javaScriptEnabled
      onMessage={onMessage}
    />
  </View>


}

有什么想法我做错了什么吗？

更新：

感谢@Ahmed Gaber 的帮助，我找到了这个问题https://github.com/react-native-webview/react-native-webview/issues/809并发现它们正在更改postMessage为injectJavaScript.

所以我将代码更新onMessage为以下内容：

const onMessage …

使用 RN 更新助手将 React Native 从 0.61.2 升级到 0.68.2 后，gradle 无法构建应用程序。出现此错误

失败：构建失败并出现异常。

• 出了什么问题：任务“：react-native-webview：compileDebugKotlin”执行失败。

java.io.IOException：权限被拒绝

尝试所有react-native-webview版本，但结果是相同的。

当我从 package.json 文件中删除 "react-native-webview": "^8.0.3" 这行然后构建成功，但应用程序出现错误，因为应用程序中使用了此依赖项

下面是我使用的依赖版本。

1. “反应”：“17.0.2”，
2. “反应本机”：“0.68.2”，
3. "@babel/core": "^7.12.9",
4. "@babel/runtime": "^7.12.5",
5. "@react-native-community/eslint-config": "^2.0.0",
6. "babel-jest": "^26.6.3",
7. "eslint": "^7.32.0",

distributionUrl=https://services.gradle.org/distributions/gradle-7.3.3-all.zip

android/build.gralde

buildscript {
    ext {
        buildToolsVersion = "31.0.0"
        minSdkVersion = 21
        compileSdkVersion = 31
        targetSdkVersion = 31
        if (System.properties['os.arch'] == "aarch64") {
            // For M1 Users we need to use the NDK 24 which added support for aarch64
            ndkVersion = "24.0.8215888"
        } else {
            // …

朋友你好，我在将 react-native-webview 链接到我的项目后收到此错误

Invariant Violation: requireNativeComponent: "RNCWebView" was not found in the UIManager.

    This error is located at:
        in RNCWebView (at WebView.android.js:250)
        in RCTView (at WebView.android.js:253)
        in WebView (at App.js:7)
        in App (at renderApplication.js:45)
        in RCTView (at AppContainer.js:109)
        in RCTView (at AppContainer.js:135)
        in AppContainer (at renderApplication.js:39)

还有我的代码

import React, { Component } from 'react';
import { WebView } from 'react-native-webview';

export default class App extends Component {
  render() {
    return (
      <WebView
        originWhitelist={['*']}
        source={{ html: '<h1>Hello world</h1>' }}
      />
    ); …

在按下后退按钮设置返回功能后，React Native WebView 应用程序不会在按下后退按钮时退出。我想在 webview 不在主页上时按下后退按钮返回功能，当 webview 在主页上时然后退出应用程序。

export default class WebView extends Component {

    constructor (props) {
        super(props);
        this.WEBVIEW_REF = React.createRef();
    }

    componentDidMount() {
        BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);
    }

    componentWillUnmount() {
      BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton);
    }

    handleBackButton = ()=>{
       this.WEBVIEW_REF.current.goBack();
       return true;
    }

    onNavigationStateChange(navState) {
      this.setState({
        canGoBack: navState.canGoBack
      });
    }


      render(){
        return (
          <WebView
            source={{ uri: 'https://stackoverflow.com' }}
            ref={this.WEBVIEW_REF}
            onNavigationStateChange={this.onNavigationStateChange.bind(this)}

          />
        );
      }
    }

react-native-webview@9.0.1当我尝试使用 npm生成 QR 码时，出现此错误react-native-qrcode-generator

我正在将 react-native 与 expo 管理的工作流程一起使用。问题是它适用于 iOS，而我只在 Android 上收到错误

我自己搜索了解决方案，并尝试安装，react-native-get-random-values但这也不起作用。

有什么想法吗？

我正在开发一个应用程序，在该应用程序中，我需要让用户在react-native-webview.

这是一个必需的工作流程。

• 我的应用程序只有一个 WebView，正在加载固定 url。

• 用户将打开应用程序并登录该网站。

• 当用户将终止应用程序并再次打开它时，我需要让该用户保持登录状态，因为他上次已经登录。

这是我到目前为止尝试过的：

• 我确实尝试过https://github.com/react-native-community/cookies。到目前为止，我只能通过以下功能保存 cookie：

// 列出 cookie（仅限 IOS）

CookieManager.getAll(useWebKit)
    .then((res) => {
        console.log('CookieManager.getAll from webkit-view =>', res);
    });

但正如它所建议的那样，它只能在 iOS 中运行。我也无法在 WebView 中打开的网站中设置该 cookie 以保持该会话处于活动状态。

• 也用过这个，https://gist.github.com/kanzitelli/e5d198e96f81b7a8263745043766127c

但我还没有发现任何成功。

任何建议或解决方案将不胜感激。

========更新======

对于安卓：

它默认工作，这意味着我们只需要为 iOS 进行检查。

我目前为工作而构建的应用程序主要侧重于显示文章。其中一些包含 Twitter 嵌入（在网络版本上），并且由于 API 由我们的两个应用程序共享，因此我也收到了作为 HTML 的嵌入。每当我尝试在源设置为 HTML 的 WebView 中显示推文和用于样式的 Twitter JS 脚本时，页面要么正确加载，但在我按下时崩溃（使用 react-navigation），或者它只是在加载时崩溃但仅打开安卓。

我尝试了以下方法：

• 使用社区支持的 WebView包而不是内置的包。我也在那里打开了一个问题。

• 从 WebView 中删除 JS 脚本。

• 改用injectedJavaScript道具。

• 安装 TwitterKit 以使用本机嵌入，不幸的是 Twitter 不再支持 :(

这就是我呈现 WebView 的方式：

const JS = '<script type="text/javascript" src="https://platform.twitter.com/widgets.js"></script>';
return (
    <View
        key={content.embed._id} 
        style={[{ overflow : "hidden", marginTop : 15, marginStart : 15 }]}>
        <WebView 
            scrollEnabled={false}
            style={{ height : 150, width : Dimensions.get('window').width - 30 }}
            source={{ html : content.embed.html + JS …

我正在使用 react-native-webview 库来加载网页，它在调试中运行良好，但是当我创建发布版本时。然后单击选项卡加载 webview ，应用程序崩溃。以下是错误。最后我也附上了错误跟踪。

我正在使用 react-native: "0.62.0" react-native-webview : "^9.0.2",

这是当我单击按钮加载 webview 屏幕时的跟踪。

> 2020-04-10 11:39:44.812 2584-2646/com.trackplayer E/ReactNativeJS:
> Error: crypto.getRandomValues() not supported. See
> https://github.com/uuidjs/uuid#getrandomvalues-not-supported
>     
>     This error is located at:
>         in n
>         in RCTView
>         in y
>         in Unknown
>         in Unknown
>         in Unknown
>         in Unknown
>         in RCTView
>         in S
>         in RCTView
>         in RCTView
>         in E
>         in RCTView
>         in c
>         in RCTView
> …

我正在尝试检索用户输入的邮政编码，该邮政编码已添加到webview的cookie中。我如何得到它？我试过react-native-cookies哪个是空对象。

import CookieManager from 'react-native-cookies';

componentWillMount() {
    CookieManager.get('https://www.example.com')
    .then((res) => {
      console.log('CookieManager.get from webkit-view =>', res);
    });
  }
}

<WebView
  style={styles.webview}
  source={{ uri: 'https://www.example.com' }}
  injectedJavaScript={INJECTED_JAVASCRIPT}
  mixedContentMode="compatibility"
  javaScriptEnabled
  domStorageEnabled
  thirdPartyCookiesEnabled
  sharedCookiesEnabled
  originWhitelist={['*']}
  useWebKit
/>

我正在iOS模拟器中尝试。Android很棒。我看到https://github.com/react-native-community/react-native-webview/pull/175已合并，但无法弄清楚如何使用它来获取用户设置的cookie。

我\xe2\x80\x99已经成功地从React Native（RN）发送消息到WebView。

我\xe2\x80\x99m 所困扰的是将消息从WebView 返回到RN。\xe2\x80\x99s 没有显示任何错误 - 它\xe2\x80\x99s 只是消息永远不会通过。

这是 I\xe2\x80\x99m 使用的代码：

反应本机代码

<WebView\n  ref={webview => (this.webview = webview)}\n  source={{ uri: "http://www.my-web-site"}}\n  onLoadEnd={() => this.onLoadEnd()}\n  onMessage={this.onMessage}\n  cacheEnabled={false}\n  originWhitelist={['*']}\n  javaScriptEnabled={true}\n/>\n\nonLoadEnd() {\n  this.webview.postMessage("RN message");\n}\n\nonMessage(message) {\n  console.log("I can\xe2\x80\x99t see this message!");\n}\n

网页视图代码

document.addEventListener("message", function (event) {\n  setTimeout(function(){document.postMessage("WebView message")}, 3000);\n}, false);\n