标签: react-native-webview

我正在尝试检索用户输入的邮政编码，该邮政编码已添加到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

 <ScrollView
      ref={scrollRef}
      horizontal
      scrollEnabled={isScroll}
      contentContainerStyle={{height: HEIGHT, overflow: 'hidden'}}
      style={{
        width: metrics.screenWidth - widthOffset,
      }}
      onScroll={_onScroll}>
      <WebView
        ref={webviewRef}
        automaticallyAdjustContentInsets={false}
        scrollEnabled={false}
        showsHorizontalScrollIndicator={false}
        showsVerticalScrollIndicator={false}
        onLoadEnd={_loadEnd}
        bounces={false}
        source={{
          html: getHtml(final, scale),
        }}
        style={{
          height: HEIGHT,
          width: WIDTH,
          backgroundColor: 'transparent',
        }}
        onMessage={_onMessage}
        javaScriptEnabled={true}
        textZoom={90}
      />
    </ScrollView>

还有

source.replace(
    '<img',
    '<img ontouchend="window.ReactNativeWebView.postMessage(`imgsrc__`+this.src)"',
)

所以问题是当我在 html img 上滚动这个滚动视图时，它会得到触摸并且手机会振动。有没有办法从源端（html）或 react-native-webview 端禁用 webview 触觉反馈？

我认为这是因为在滚动 img 标签时将交互视为 longtouch，因此它在 webview 中启用 longtouch。

我尝试加载一个依赖于其他 .js 文件的 HTML 文件。

所以我写了这样的代码，但在 webview 中得到了纯文本。

render = () => {
    let source;
    if (__DEV__) {
      source = require('./vendor/Editor/index.html');
    } else {
      source =
        Platform.OS === 'ios'
          ? require('./vendor/Editor/index.html')
          : {uri: 'file:///android_asset/vendor/Editor/index.html'};
    }

    return (
      <WebView
        startInLoadingState
        source={source}
        onMessage={this.handleMessage}
        automaticallyAdjustContentInsets={false}
        style={[
          AppStyles.container,
          styles.container,
          {height: this.state.visibleHeight},
        ]}
      />
    );
  };

我像这样简化了代码，但它也不起作用。

  render = () => {
    setTimeout(() => {
      this.webview.injectJavaScript(
        'window.ReactNativeWebView.postMessage(document.body.innerHTML)',
      );
    }, 3000);

    return (
      <WebView
        source={require('./vendor/GrEditor/index.html')}
        onMessage={e => console.log('e: ', e)}
      />
    );
  };

抱歉语法不好。

我正在尝试使用react-native-webview在我的React-Native应用程序中渲染HTML片段 ，我也尝试了react-native-render-html，但是在这个CSS中并没有那么有效。

这是我的错误堆栈

 ERROR  TypeError: Cannot read property 'isFileUploadSupported' of null, js engine: hermes 
at App (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.dbc&modulesOnly=false&runModule=true:93600:36)
at RCTView
at View
at RCTView
at View
at AppContainer (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.dbc&modulesOnly=false&runModule=true:85300:36)
at DBC(RootComponent) (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.dbc&modulesOnly=false&runModule=true:89907:28)
 ERROR  Error: Requiring module "node_modules/react-native-webview/index.js", which threw an exception: TypeError: Cannot read property 'isFileUploadSupported' of null, js engine: hermes 
at App (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.dbc&modulesOnly=false&runModule=true:93600:36)
at RCTView
at View
at RCTView
at View
at AppContainer (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.dbc&modulesOnly=false&runModule=true:85300:36)
at DBC(RootComponent) (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.dbc&modulesOnly=false&runModule=true:89907:28)
 ERROR  TypeError: Cannot read property 'WebView' of undefined
This …

基本说明

我正在 webview 中渲染一个 epub 文件，我希望用户无法复制文本，但我想让他出于某种原因选择文本（突出显示和一些东西）

。

默认提示：

我只是想禁用此默认工具提示，并且在进行任何选择后不显示它。

我正在搜索，发现我可以通过使用以下两行代码来阻止用户选择：

"-webkit-user-select": "none",
"user-select": "none",

但这不是我想要的。我想让用户选择文本而不让他们复制它。。

请帮助我谢谢

在 expo 移动应用程序中工作正常，但通过运行命令在 Web 浏览器上打开 Expo 应用程序时，相同的代码不会显示任何内容expo start --web

这是示例代码

    <WebView 
     originWhitelist={['*']} 
     source={{ uri: 'https://sofit.ltd' }}
     style={{marginBottom:100, height:"100%", width:"100%" }}
    />

我想监听一个 webapp 内部触发的点击事件，这个 webapp 在react-native webview中加载。因此需要监听点击事件，然后在react-native中运行异步函数。

我的用例是单击保存按钮后下载文件（此保存按钮位于网络应用程序内）。

handleNavigationStateChange但和内部没有任何内容被触发或监听onMessage。请找到下面的代码。

  render() {
    const url = 'https://www.takeselfie.com/#';
    return (
      <WebView
      useWebKit
      originWhitelist={['*']}
      allowsInlineMediaPlayback
        bounces={true}
        source={{
          uri: url,
        }}
        startInLoadingState={true}
        scalesPageToFit
        javaScriptEnabledAndroid={true}
        javaScriptEnabled={true}
        injectedJavaScript={`document.body.addEventListener('click', function(e){
          window.postMessage("Message from WebView","*");
            console.log(e)
        })`}
        onMessage={e => console.log("message==", e)}
         mixedContentMode={'always'}
        allowUniversalAccessFromFileURLs={true}
        onNavigationStateChange={this.handleNavigationStateChange}
        style={{ flex: 1 }}
      />
    );
  }

我有一个在 web 视图中打开的单点登录网站。用户登录后，我需要使用 cookie 来从 API 请求令牌，并在应用程序中将其用于所有其他请求。这一切在 Android 上运行良好，但在 iOS 上，当我请求令牌时，没有 cookie。WebView 配置为使用共享 cookie 存储：

    <WebView
        source={{ uri: loginUrl }}
        onMessage={handleSsoLogin}
        injectedJavaScriptBeforeContentLoaded={JS_INTERFACE}
        sharedCookiesEnabled={true}
      />

如果我使用 devTools 检查 webView，我可以看到 cookie。另外，如果我再次访问 SSO 站点，我已经记录了它。因此，cookie 被 webView 保存和使用。它们只是不被使用fetch并且 CookieManager 不访问它们：

const cookies = await CookieManager.get(url);
console.log({ cookies });
...
{"cookies": {}}

那么，问题来了，如何从webView中获取这些cookie呢？

这是版本旧版本=>“react-native-webview”：“^11.17.2”，新版本=>“react-native-webview”：“^11.18.0”

我正在使用 webview 渲染 html，但它需要或依赖于其他库

react-native-test-app

here is the warning I got


warn Package react-native-webview has been ignored because it contains invalid configuration. Reason: Cannot find module 'react-native-test-app/package.json'

需要堆栈：

• /Volumes/companyData/Meta_Quiz_App_ReactNative/node_modules/react-native-webview/react-native.config.js
• /Volumes/companyData/Meta_Quiz_App_ReactNative/node_modules/import-fresh/index.js
• /Volumes/companyData/Meta_Quiz_App_ReactNative/node_modules/cosmiconfig/dist/loaders.js
• /Volumes/companyData/Meta_Quiz_App_ReactNative/node_modules/cosmiconfig/dist/createExplorer.js
• /Volumes/companyData/Meta_Quiz_App_ReactNative/node_modules/cosmiconfig/dist/index.js
• /Volumes/companyData/Meta_Quiz_App_ReactNative/node_modules/@react-native-community/cli/build/tools/config/readConfigFromDisk.js
• /Volumes/companyData/Meta_Quiz_App_ReactNative/node_modules/@react-native-community/cli/build/tools/config/index.js
• /Volumes/companyData/Meta_Quiz_App_ReactNative/node_modules/@react-native-community/cli/build/commands/install/install.js
• /Volumes/companyData/Meta_Quiz_App_ReactNative/node_modules/@react-native-community/cli/build/commands/index.js
• /Volumes/companyData/Meta_Quiz_App_ReactNative/node_modules/@react-native-community/cli/build/index.js
• /Volumes/companyData/Meta_Quiz_App_ReactNative/node_modules/react-native/cli.js

当我安装这个时

npm i react-native-test-app

那么它在 Android 上工作正常，但在 ios 上会导致 Pod 问题。如果我回到旧版本它仍然存在。预先感谢，请等待您的帮助