那些遇到过的问题

标签: react-native-webview

react-native : 从 WebView 的 url 获取内部 api 调用数据

我有一个带有 url 的 webview（例如付款处理页面）。加载 url 后，某些 api 调用就完成了，我想知道如何从该特定 url 的内部 api 调用中获取数据。

它不像网页和本机代码之间的通信。(window.ReactNativeWebView.postMessage或onMessage) 我需要来自网页的内部 api 调用响应数据。

javascript react-native react-native-webview

For*_*kie
lucky-day
5
推荐指数
1
解决办法
383
查看次数

react-native-webview：对于iOS文本太小

我已经用于react-native-webview呈现HTML文本。但是在iOS中文本太小，而在android中则太完美了。

以下是代码行： 

import { WebView } from "react-native-webview";


render() {
  <WebView
        originWhitelist={['*']}
        source={{ html: '<p>This is a static HTML source!</p>' }}
  />
}
Run Code Online (Sandbox Code Playgroud)

附屏幕截图：

在此处输入图片说明

react-native react-native-ios react-native-webview

Pay*_*yar
lucky-day
4
推荐指数
1
解决办法
1103
查看次数

使用本地 javascript 响应 Native WebView

我将使用 WebView 创建一个 React Native 应用程序。该视图必须包含本地 HTML 和 Javascript 文件。这是代码。

---> WVView.js

...
    render(){
        return (
            <View style={{flex:1}}>
                <StatusBar/>
                <WebView
                    nativeConfig={{props: {webContentsDebuggingEnabled: true}}}
                    ref={webview => { this.myWebView = webview; }}
                    source={require('./Resources/index.html')}
                    javaScriptEnabled={true}
                    injectedJavaScript={} 
                    onMessage={this.onWebViewMessage}
                    style={{flexBasis: 1, flexGrow:1}}
                    scrollEnabled={false}
                    />
            </View>
        );
    }
...
Run Code Online (Sandbox Code Playgroud)

---> 索引.html

<div class="widget-container">
    <div id="test12"></div>
    <script type="text/javascript" src="./Utils.js"></script> 
    <script type="text/javascript" src="./WebViewBrdge.js"></script>   
    <script type="text/javascript" src="./TVS.js"></script>
</div>
Run Code Online (Sandbox Code Playgroud)

---> 目录

|__ WVView.js
|__ Resources
       |__ index.html
       |__ Utils.js
       |__ WebViewBridge.js
       |__ TVS.js
Run Code Online (Sandbox Code Playgroud)

请问您能建议开发此解决方案的最佳方法吗？当我阅读文档时，我发现像 source{{html:...}} 或injectedJavascript 这样的代码用于加载静态本地 javascript。我没有找到类似的例子。

现在我无法加载 JavaScript …

html javascript webview react-native react-native-webview

zp2*_*p26
lucky-day
4
推荐指数
1
解决办法
1万
查看次数

react-native-webview Typescript 错误：“WebView”无法用作 JSX 组件

我正在尝试使用 Expo 和 TypeScript 来设置一个简单的 React Native 应用程序，以显示 WebView。我的App.tsx文件包含以下内容：

import Constants from 'expo-constants';
import { StyleSheet } from 'react-native';
import { WebView } from 'react-native-webview';

export default function App() {
    return (
        <WebView
            style={styles.container}
            source={{ uri: 'https://example.com/' }}
        />
    );
}

const styles = StyleSheet.create({
    container: {
        marginTop: Constants.statusBarHeight,
    },
});
Run Code Online (Sandbox Code Playgroud)

此代码可以正常工作，但 TypeScript 编译器会在 WebView 组件中引发错误。

App.tsx:7:4 - error TS2786: 'WebView' cannot be used as a JSX component.
  Its instance type 'WebView<{ style: { marginTop: number; }; source: …
Run Code Online (Sandbox Code Playgroud)

typeerror typescript reactjs react-native react-native-webview

Jul*_*iet
lucky-day
4
推荐指数
1
解决办法
2913
查看次数

onShouldStartLoadWithRequest 在 WebView 中加载任何 url 时自动调用 iOS React Native，如何控制它？

我正在为我的应用程序实施应用程序WebView。我必须打开一些信息页面，并且必须根据 web 视图中任何特定位置（包含不同类型的数据）的点击来获取一些数据。但在 iOS 中，在加载任何 URL 时onShouldStartLoadWithRequest会自动调用，这会导致在 HTML 内容中打开不同的 URL。但它在 Android 中按预期工作。

<WebView
  originWhitelist={["*"]}
  style={style}
  source={source}
  showsVerticalScrollIndicator={showsVerticalScrollIndicator}
  startInLoadingState={startInLoadingState}
  javaScriptEnabled={true}
  onShouldStartLoadWithRequest={request => {
    return onLoadWebViewOnClick(request)
  }}
/>
Run Code Online (Sandbox Code Playgroud)

在这个handleUrlNavigation中会处理任何点击动作的请求，但是它每次都会自动调用。我该如何处理这个问题？

ios react-native react-native-ios react-native-webview

Kar*_*ava
lucky-day
3
推荐指数
1
解决办法
1万
查看次数

ReactNative WebView 无法在网页上呈现，但在 Android 上运行良好

使用的版本：

"expo": "^36.0.2",
"react": "16.9.0",
"react-dom": "^16.8.6",
"react-native": "0.61.4",
"react-native-web": "0.11.7",
"react-native-webview": "^8.1.2"
Run Code Online (Sandbox Code Playgroud)

使用的 React Native 代码：

<WebView
    source={{uri: 'https://www.somedomain.com/'}}
    style={{marginTop: 22, flex: 1}}
    injectedJavaScript={this.state.contentScript}
    domStorageEnabled={true}
    startInLoadingState={true}
    onMessage={this.receiveMessage}
    ref={this.props.webview}
/>
Run Code Online (Sandbox Code Playgroud)

网页版上只有红色边框，而 Android 版则可以正常加载。

不存在错误。这可能是一个已知问题吗？但我在任何地方都找不到报道。

react-native expo react-native-webview

The*_*heE
2020 03-09
3
推荐指数
1
解决办法
8210
查看次数

React-Native，Stripe 卡元素不显示实时 API 密钥

在我的 react-native 项目中，我使用了 react-native-webview 和 stripe js ( https://js.stripe.com/v3 )

使用条纹 js 我正在创建卡片元素来收集卡片详细信息

var elements = stripe.elements()
var card = elements.create('card');
card.mount('#card-element');
Run Code Online (Sandbox Code Playgroud)

当用户按下提交按钮时，我正在调用 stripe.confirmPaymentIntent() 函数来完成付款。

但是当我使用 PRODUCTION PUBLIC_KEY 卡元素未显示时，我遇到了问题，用于测试 PUBLIC_KEY 卡元素是否正确显示。

任何解决方案？

我的项目详情是

  • “反应”：“16.9.0”
  • “反应原生”：“0.61.5”
  • “react-native-webview”：“10.3.2”

xcode 版本 - 12.1 IOS 版本 - 14.1

function stripeCheckoutRedirectHTML(PUBLIC_KEY) {
  return `<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<html>
<body>
  <!-- Load Stripe.js on your website. -->
  <script src="https://js.stripe.com/v3"></script>
  <h1 id="error-message"></h1>
  <form method="post" id="payment-form">
    <div class="form-row">
      <label for="card-element">
        Credit or debit card
      </label>
      <div …
Run Code Online (Sandbox Code Playgroud)

html javascript stripe-payments react-native react-native-webview

nit*_*ian
lucky-day
3
推荐指数
1
解决办法
600
查看次数

当在react-navigation选项卡中的active选项卡上时，react-native-webview仅开始加载

我使用的是bottomTabNavigator与lazy设置为false。对于屏幕，我渲染了react-native-webview。之所以调用render函数，是因为我可以看到console.log，但是直到选项卡被激活，实际的Webview才开始加载。我开始的选项卡立即开始加载。

标签

const Tab = () => { 
    console.log('render') // this is being called right away

    return (<WebView 
             onLoadStart={() => console.log('on load start') // this is being called only when tab becomes active (clicking on it) }
             source={{uri:'linkgoes.here'}} />) 
}
Run Code Online (Sandbox Code Playgroud)

航海家

  const TabNavigator = createBottomTabNavigator(
  {
    TabOne: {
      screen: Tab
    },
    TabTwo: {
      screen: Tab
    }
  },
  {
    initialRouteName: 'TabOne',
    lazy: false,
  }
)
Run Code Online (Sandbox Code Playgroud)

react-navigation从1.x 升级到3.x并升级react-native和react-native-webview。我希望webview立即开始加载，而不只是在可见时开始加载。

javascript react-native react-navigation react-native-webview

Yvo*_*lon
lucky-day
2
推荐指数
1
解决办法
241
查看次数

react-native-webview 为什么 goBack() 方法不起作用？

我在 Expo 中有一个简单的 React Native 项目，它使用react-native-webview启动一个网站。

这是源代码：

import React from "react";
import { StyleSheet, View, SafeAreaView } from "react-native";
import { AntDesign } from "@expo/vector-icons";

import { WebView } from "react-native-webview";


export default function App() {
  const goback = () => {
    WebView.goBack();
  };

  return (
    <SafeAreaView>
      <WebView source={{ uri: "https://google.co.uk" }} />
      <View style={styles.navbar}>
        <View style={styles.forward}>
          <AntDesign name="right" size={25} color="grey" />
        </View>
        <View style={styles.back}>
          <AntDesign name="left" size={25} color="grey" onPress={goback} />
        </View>
      </View>
    </SafeAreaView>
  );
}

const styles …
Run Code Online (Sandbox Code Playgroud)

react-native react-native-android react-native-ios expo react-native-webview

Gar*_*ary
2020 07-12
2
推荐指数
1
解决办法
4267
查看次数

React Native Webview - 注入Javascript不工作

我试图在 React Native Webview 的内容加载之前注入 JS 代码来提醒用户，但是，对我来说，它只是转到活动指示器并加载 Webview，而不注入任何 Javascript。我该如何解决？代码如下：

import React from 'react';
import { View, ActivityIndicator } from 'react-native';
import { WebView } from 'react-native-webview';
import styles from '../../styles';

export default function Links() {

  function LoadingIndicatorView() {
    return (
      <View style={styles.hubLoading}>
        <ActivityIndicator color='#009b88' size='large' />
      </View>
    )  
  }

  const runFirst = `
      setTimeout(function() { window.alert('hi') }, 2000);
      true; // note: this is required, or you'll sometimes get silent failures
    `

  return <WebView source={{ uri: https://www.google.com/ }} renderLoading={LoadingIndicatorView} startInLoadingState={true} javaScriptEnabled={true} …
Run Code Online (Sandbox Code Playgroud)

javascript react-native react-native-webview

KLG*_*KLG
lucky-day
2
推荐指数
1
解决办法
1万
查看次数

react-native-webview 禁用文本选择

有没有一种实用的方法可以在react-native webview中禁用文本选择？我想对用户禁用此示例，这意味着用户将无法选择应用程序中呈现的 Web 视图的文本。我还需要保持链接能够按下并从中导航。

在react-native-webview中没有可以使用的props。

无法访问我获取 web 视图中显示的 html 的服务器。

android ios reactjs react-native react-native-webview

Uri*_*ech
2020 10-27
1
推荐指数
1
解决办法
4414
查看次数

React Native Webview“onNavigationStateChange”仅在 iOS 设备上返回空 document.title

我正在尝试使用 Paypal 创建付款结账流程，并使用 WebView 处理 ExpressJS 后端的请求。React Native应用程序读取后端渲染的html的document.title来确定事务的成功或失败。在 Android 上它工作得很好，但是在 iOS 上 document.title 总是返回为“”。

反应本机部分：

const INJECTED_JAVASCRIPT =
    `document.getElementById('total').value="${total}"; 
    document.getElementById('address').value="${address}"; 
    document.getElementById('firstName').value="${userProfile.firstName}";
    document.getElementById('lastName').value="${userProfile.lastName}";
    document.getElementById('email').value="${accessStore.auth.userEmail}";
    document.getElementById('addressDetails').value="${moreDetails}";
    setTimeout(function() {document.f1.submit()}, 1000);`
    
    
<WebView
     source={{uri: process.env.BACKEND_NODE_URL_PAYMENT}}
     onNavigationStateChange={(data) => {
         handleResponse(data), console.log(data)
     }}
     onMessage={(event) => {}}
     injectedJavaScript={INJECTED_JAVASCRIPT}
/>
Run Code Online (Sandbox Code Playgroud)

特快专区

app.get('/success', (req, res) => {

    var PayerID = req.query.PayerID;

    var execute_payment_json = {
         "payer_id": PayerID,
    };

    var paymentId = req.query.paymentId;

    paypal.payment.execute(paymentId, execute_payment_json, function (error, payment)
    {
         if (error) {
              console.log(error.response);
              throw error;
         } else {
             res.render('success');
         }
    }); …
Run Code Online (Sandbox Code Playgroud)

webview android-webview reactjs react-native react-native-webview

Eri*_*ann
lucky-day
1
推荐指数
1
解决办法
6869
查看次数

标签 统计

react-native ×12

react-native-webview ×12

javascript ×5

react-native-ios ×3

reactjs ×3

expo ×2

html ×2

ios ×2

webview ×2

android ×1

android-webview ×1

react-native-android ×1

react-navigation ×1

stripe-payments ×1

typeerror ×1

typescript ×1