react-native不使用startInLoadingState={true}在WebView中呈现远程PDF
React Native 是一种用于构建跨平台移动应用程序的开发框架。它允许开发人员使用JavaScript编写代码，并通过React Native将其转化为原生组件，以便在iOS和Android上运行。
WebView 是React Native提供的一个组件，用于在应用程序中显示Web内容。使用WebView可以加载并显示远程PDF文件。
startInLoadingState={true}是WebView组件的一个属性，用于在加载Web内容时显示加载指示器。
如果不使用startInLoadingState={true}在WebView中呈现远程PDF，可以考虑以下方法：
- 使用第三方库： 可以使用第三方库，例如 react-native-pdf，它专门用于在React Native应用程序中呈现PDF文件。该库提供了更多的功能和配置选项，以便更好地控制PDF的呈现。
- 推荐的腾讯云产品：无
- 使用其他方式呈现PDF： 可以使用其他库或技术来呈现PDF，例如将PDF转换为图片，然后使用React Native的Image组件显示图片。这种方法可能需要额外的转换步骤，但可以提供更大的灵活性和控制权。
- 推荐的腾讯云产品：无
总结： 以上是在不使用startInLoadingState={true}的情况下在WebView中呈现远程PDF的一些解决方法。根据具体需求和项目情况，选择适合的解决方案。
相关·内容
我最近在代码中添加了<ActivityIndicator>，以便在<WebView>中加载外部链接时显示加载器。 这适用于许多不同的链接，除了那些带有PDF的链接，例如：http://www.pdf995.com/samples/pdf.pdf 这样，它最初显示加载器，但随后呈现空白页面。在iOS中，当我试图向下滚动时，我确实看到了页码。它只是不显示PDF内容。 如果我从<WebView>中删除startInLoadingState={true}，它可以正常工作，但加载器不会显示。 我需要让这个工作与加载器显示在- iOS和安卓。 世博会零食演示：http
浏览 10提问于2019-02-17得票数 5
回答已采纳
我能够覆盖组件中的按钮，但无法调用本地函数，例如，当我按下“刷新”时，什么都不会发生。这是重写按钮文本和执行功能的正确方式吗？谢谢你的帮助。谢谢。
import { WebView } from 'react-native'
import React, { PropTypes, Component } from 'react';
import { View, Text } from 'react-native';
import styles from '../src/styles/home'
var WEBVIEW_REF =
浏览 3提问于2016-11-10得票数 3
回答已采纳
我正在开发一个react-native应用程序，在它中，我使用WebView组件在应用程序中呈现网页。但我无法从android移动应用程序的网站下载这些文件。
<View style={styles.container}>
<WebView
source={{ uri: 'https://********** }}
ref={'WEBVIEW_REF'}
startInLoadingState={true}
scalesPageToFit={true}
浏览 1提问于2019-01-06得票数 3
我正在使用下面的代码打开一个URL。在Android上打开之后，从React本机网站下载PDF文件：
“入侵的pdf格式或损坏”
但它在iOS上运行得很好。
<WebView
renderToHardwareTextureAndroid={true}
startInLoadingState={isLoading}
renderLoading={() => {
return <BarIndicator color="blue" />;
}}
medi
浏览 4提问于2021-09-07得票数 0
以前的版本不起作用，因为它是新的。 "react-native-webview"："^9.0.2“"react-native"："0.62.0"， 2. webview options
javaScriptEnabled={true}
mediaPlaybackRequiresUserAction={false}
startInLoadingState={true}
allowUniversalAccessFromFileURLs={true}
onMessage={this.respondToOnMessage}
3. react-
浏览 83提问于2020-04-03得票数 0
我试图在网页中显示加载指示器，如下所示。加载指示器正在显示，但页面加载后显示白色背景。如果我将startInLoadingState更改为false，则显示web内容，但不显示加载指示器。它发生在ios上的"react-native"："0.46.3“
renderLoadingView() {
return (
<ActivityIndicator
animating = {this.state.visible}
color = '#bc2b78'
浏览 0提问于2017-07-23得票数 31
目前，我正在将一个html文件从我的android资源文件夹加载到webview中。
dashboard.html文件包含一些脚本。如果它是静态的，它工作得很好。
<WebView
ref={(component) => (this.webview = component)}
style={{ height: height * 1.3 }}
javaScriptEnabled={true}
domStorageEnabled={true}
source={{uri:'file:///android_asset/graph/pages/dashboard.
浏览 4提问于2018-08-30得票数 2
目前，我已经将这个ChatBot嵌入到一个类似这样的WebView中。 import React, { useRef } from 'react';
import { StyleSheet, View, SafeAreaView } from 'react-native';
import HeaderV2 from '../../components/HeaderV2';
import { WebView, WebViewNavigation } from 'react-native-webview';
export defa
浏览 19提问于2020-09-17得票数 0
我有一个带有webview的原生react应用。当我单击一个通知时，我想转到预定义页面(导航到一个页面)，但应用程序没有呈现新视图。这是我打开应用程序时的代码(没有通知单击)： return (
<WebView
automaticallyAdjustContentInsets={false}
source={{
uri: 'https://my-url/',
}}
javaScriptEnabled={true}
domStorageEnabled={true}
startInLoadingState={
浏览 22提问于2020-09-03得票数 0
回答已采纳
我遇到了一个非常奇怪的问题，就是在Android平板电脑上使用HTML标签来响应WebView的<select>。
由于某种原因，点击呈现的<select> 按钮不会打开选项列表.。
这种情况只发生在Android平板电脑上，而不管Android版本如何。然而，在Android智能手机上，这一错误并没有发生，选项列表按预期打开。
为了重现这个bug，我创建了一个简单的演示应用程序：。
重要的守则如下：
index.android.js
import React, { Component } from 'react';
import {
AppRegi
浏览 7提问于2017-02-01得票数 45
我正在开发一个移动应用程序与Reactive原住民。我想在按下按钮后打开WebView。这是我的代码，但不起作用。按钮onPress方法不起作用。
import React, { Component } from 'react';
import { View, StyleSheet, Button, WebView } from 'react-native';
import { Constants } from 'expo';
export default class webView extends Component {
onNavi
浏览 4提问于2017-10-28得票数 4
回答已采纳
3回答
我想在不触发浏览器或下载PDF本身的情况下在另一个活动中查看/打开pdf。
目前，我正在使用以下代码：
String myPdfUrl = "http://example.com/awesome.pdf";
String url = "http://docs.google.com/gview?embedded=true&url=" + myPdfUrl;
Log.i(TAG, "Opening PDF: " + url);
webView.getSettings().setJavaScriptEnabled(true);
webView
浏览 1提问于2018-09-11得票数 0
3回答
如何通过解压更新世博会网页？
、、、、
我制作了Webview应用程序与博览，反应-本地观看youtube。
一开始我做了这样的基本应用程序
import * as React from 'react';
import { WebView } from 'react-native-webview';
export default class App extends React.Component {
render() {
return <WebView
source={{ uri: 'https://www.google.com' }}
allo
浏览 0提问于2020-05-19得票数 3
我在Webview中显示PDF文件，这是从服务器获得的URL。为了显示这一点，我使用了google drive viewer，如下所示。
let uri = pdfURL;
if (/\.pdf$/.test(uri)) {
uri = `https://drive.google.com/viewerng/viewer?embedded=true&url=${uri}`;
}
<WebView
source={{ uri }}
style={styles.w
浏览 0提问于2019-08-20得票数 1
我有一个网页视图，我想要允许加载的网页，如果它们包含例如google.com作为主机，但我不知道如何实现该代码，你能帮我吗
jsCode() {
//something here
}
<WebView
source={webapp}
ref="WEBVIEW_REF"
onNavigationStateChange={this.onNavigationStateChange}
style={webView}
startInLoadingState
浏览 0提问于2018-09-04得票数 0
使用的版本：
"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"
使用React Native代码：
<WebView
source={{uri
浏览 3提问于2020-03-09得票数 0
我计划在react-native-webview中展示我的react应用程序。我实现了WebView的代码。当我放入URL 时，它工作得很好。但是当我使用我的react app URL 时，它没有渲染任何东西。它只显示一个白色屏幕。有谁能帮我在WebView中运行React应用程序吗？
这是我的代码示例：
import React from 'react';
import { StyleSheet, StatusBar, Platform, View } from 'react-native';
import { WebView } from
浏览 0提问于2020-11-25得票数 0
我创建了完整的离线ReactJS web应用程序，我想使用Reacti-Native从Web运行它。
为此，我遵循了以下程序：
我创建了一个编译过的ReactJS web应用程序，使用以下命令获得了build：
npm run build
然后，我创建了react本机项目，并将build文件夹放置在以下体系结构中
我用以下内容更新了App.js：
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, WebView} from
浏览 0提问于2019-05-14得票数 9
我有以下几点： import React from 'react';
import { View, ActivityIndicator } from 'react-native';
import { WebView } from 'react-native-webview';
export default function Links() {
function LoadingIndicatorView() {
return (
<View style={styles.hubLoading}>
浏览 32提问于2021-05-09得票数 0
回答已采纳
我在Webview中有一个url，如，当前的代码可以加载inital页面，但是如果我在链接中输入了任何内容，页面需要一段时间才能加载，而且网站中没有加载指示符。当我们单击任何链接或页面加载，特别是在服务器端呈现类似于下一个js的链接或页面加载时，我们是否可以将页面加载指示符放置在中？
这是我的ReactNative代码。
import * as React from 'react';
import {
View,
Text,
Image,
SafeAreaView,
ScrollView,
TextInput,
TouchableOpacity,
}
浏览 4提问于2020-06-28得票数 3
回答已采纳
我想使用UIWebView显示一个远程多页pdf。以下是我在viewDidLoad中所做的
self.webView.scalesPageToFit = true
self.webView.contentMode = UIViewContentMode.ScaleAspectFit
let url : NSURL! = NSURL(string: pdfFile)
webView.loadRequest(NSURLRequest(URL: url ))
webview是UIWebView的一个实例，字符串pdfFile包含远程服务器上pdf的URL。
当我运行这个时，视图显示的是pdf的第一页
浏览 2提问于2016-05-11得票数 3
回答已采纳
1回答
我在模仿react本地文档中的例子，不知道为什么我的webview不会加载这个网站。
这是我的代码：
/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
'use strict';
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
View,
Image,
TextInput,
Button,
TouchableHighlight,
TouchableOpacity,
浏览 1提问于2016-02-17得票数 3
我正在尝试注入JS代码，以便在加载内容之前通知用户，但是，对我来说，它只是转到活动指示器并加载Webview，而没有注入任何Javascript。我该怎么解决这个问题？代码如下：
import React from 'react';
import { View, ActivityIndicator } from 'react-native';
import { WebView } from 'react-native-webview';
import styles from '../../styles';
export defa
浏览 7提问于2021-05-07得票数 1
回答已采纳
在我的应用程序中，我下载并保存一个文件到我的应用程序的缓存目录(例如file:///data/user/0/.../cache/5f8f.../downloaded.pdf)，并尝试使用WebView打开这个文件。我的WebView代码是：
<WebView
source={{ uri: file.uri }}
startInLoadingState
originWhitelist={['file://']}
allowUniversalAccessFromFileURLs={true}
allowFileAccess={true}
/>
在iO
浏览 10提问于2020-10-26得票数 1
回答已采纳
1回答
当我想发送URL的数据时，我遇到了问题，所以当您转到下一页时，您将显示特定的url，im使用expo cli而不是响应本机cli。
website.tsx
import React, { useState } from "react";
import { Dimensions } from "react-native";
import { Div, Text } from "react-native-magnus";
import WebView from "react-native-webview";
const Websit
浏览 1提问于2022-05-30得票数 1
我知道我好像没办法让这件事起作用。"onFileDownload={ ({ nativeEvent：{ downloadUrl }) => {“已经添加，我需要我自己的代码来完成这项工作。我试着使用世博文件系统和世博共享来下载这个文件，但是它不起作用。我想要的是，当他们下载一个pdf，而不是预览，他们可以共享或保存它。任何帮助都将不胜感激。
下面是我试图使它工作但失败的代码(警报函数可以工作，但没有发生任何事情)：
import React, { Component } from 'react';
import { StyleSheet, ActivityIndi
浏览 3提问于2020-09-10得票数 1
通过查看react-本机文档和这里的各种答案，我可以看到：
this.refs[WEBVIEW_REF].stopLoading();
用于阻止webView继续加载。
我试过了，但总能得到一个：
undefined is not an object (evaluating 'this.refs[WEBVIEW_REF]')
我的代码如下所示，我试图阻止应用程序加载帮助页面并在浏览器中启动，而不是在应用程序中启动。
import React, { Component } from 'react';
import {
AppRegistry,
StyleS
浏览 1提问于2017-05-22得票数 0
回答已采纳
我用Expo创建我的项目。我使用基于react-native-router-flux的react-navigation导航布局
我想嵌入一个youtube id，我发现世博还不支持YoutuBe api，所以我尝试使用WebView。
下面是我的WebView代码：
<WebView
source={{ uri: 'https://www.youtube.com/embed/2B_QP9JGD7Q' }}
style={{ flex: 1 }}
java
浏览 4提问于2017-08-28得票数 3
在react原生webview中，当我导航到一个页面时，onNavigationStateChange返回上一页的url？我认为这是一个问题，并将其发布到github react原生问题。
<WebView
ref={r => this.webview = r}
style = {{marginTop : 0}}
onNavigationStateChange=
{this._onNavigationStateChange.bind(this)}
startInLoadingState = {true}
source
浏览 1提问于2018-05-02得票数 1
回答已采纳
我正在尝试实现一个代码，该代码使用来自'@react-native-community/netinfo'.的反应性本机NetInfo测试internet连接性。它给了我一个错误，它说“找不到变量: connectionStatus"。我尽力正确地申报，但出于某种原因，这是上面的错误。
import React, { Component } from 'react'
import NetInfo from '@react-native-community/netinfo';
import { ActivityIndicator, Style
浏览 0提问于2021-08-23得票数 1
回答已采纳
我有一个使用Firebase的react原生应用程序(带有“@react-本机-firebase/auth”："^6.0.1")。
在这个应用程序中有一个Webview (带有“react-本机-webview”："^7.5.2")。
用户登录，然后我可以通过以下方式访问它的jwt：
auth().currentUser.getIdTokenResult()
.then(jwtToken => {
console.log('jwtToken: ', jwtToken.token);
})
现在，我需要用户打开Webview，
浏览 2提问于2019-12-09得票数 1
回答已采纳
我使用以下代码在我的iPhone5S上通过WebView播放youtube或vimeo视频：
<WebView ref='webview' javaScriptEnabled={true} scrollEnabled={true} automaticallyAdjustContentInsets={false} style={itemStyles.webView} url={videoUrl} onShouldStartLoadWithRequest={false} startInLoadingState={false} allowsInlineMediaPlayback
浏览 0提问于2016-03-25得票数 4
在react原生中，webview不会加载任何弹出窗口。当我尝试显示弹出窗口时，_onShouldStartLoadWithRequest、_onNavigationStateChange、_renderError也不会记录任何事件。
下面是我的渲染方法。
render() {
const finalURL='xyz';
return(
<WebView
source={{uri:finalURL}}
javaScriptEnabled={true}
浏览 0提问于2017-03-05得票数 1
我正在使用react-native-webview在一个React中加载一个表单(由Django提供)。此表具有CSRF保护。而且大多数情况下，它实际上运作良好，你可以通过webview在应用程序中提交表单，一切都很好。但有时我会得到403个CSRF错误(CSRF验证失败，请求中止)。
我不知道是什么导致了这一切，怎么才能避免呢？我使用WebView的方式相当简单，它周围有一个包装器。
如果手机上有网络连接问题，那么我可能会得到一个超时错误，对吧，而不是这样的具体问题？
import { WebView as BaseWebView } from 'react-native-webvi
浏览 2提问于2022-01-12得票数 1
1回答
相对较新的反应本地人。一直试图获得一个QR代码扫描仪来扫描QR代码，并将App屏幕指向一个get视图，以查看从QR代码解码的URL。许多QR代码包给出了显示URL的示例，但它们不一定提到将URL传递给they视图。
方法
这里，我将url设置为空字符串，变量webview设置为false。扫描后，我将更新url的状态，并将变量webview设置为true。
然后，在扫描QR代码时，使用条件呈现尝试在QR代码扫描和webview之间切换。我已经包括了一个按钮来切换回QR相机。
问题
应用程序在扫描QR代码时崩溃。在xcode的调试模式中没有明显的错误。我已经看过模拟器的调试部分，没有明显的错误，
浏览 5提问于2020-10-29得票数 0
回答已采纳
我在react中有一个webview，如下所示。
<WebView
source={{ uri: this.state.url }}
style={ this.state.style }
javaScriptEnabled = { true }
startInLoadingState = {true}
onLoad = {this.showPage()}
onLoadEnd = {this.showPage()}
/>
当我设置this.state.url时，我希
浏览 3提问于2016-09-05得票数 3
我试图在我的react本机应用程序中使用WebView组件，但是web视图没有加载任何url。
我想做的是实现一个有一些按钮的应用程序。当用户单击该按钮时，应用程序应该能够使用相应的url打开web视图。
这是我的密码。
(App.js)
import React, { Component } from 'react';
import Link from './Link';
export default class App extends Component {
render() {
return (
<
浏览 2提问于2018-10-02得票数 1
回答已采纳
如何重新渲染在使用react原生构建的应用程序中运行的web视图。举个例子:购物车标签需要在我每次点击时加载相同的url。
这是cart类：
import React, { useState } from 'react';
import { ActivityIndicator, WebView, View, Button, ScrollView,
RefreshControl,
Text, } from 'react-native';
import Config from '../config';
export default cl
浏览 12提问于2020-02-17得票数 0
尝试使用多个前缀urls：(FINAL_URL = PREFIX_URL+DOCUMENT_URL)
前缀urls：
为此，我使用了react本机-webview。
<WebView
source={{
uri: `${PREFIX_URL}${attachmentUrl}`
}}
javaScriptEnabled={true}
cacheEnabled={false}
startInLoadingState={true}
/>
浏览 2提问于2020-08-19得票数 0
1回答
这个描述有点棘手。我正在使用react本机WebView组件来制作一个迷你浏览器。它工作正常，但在底部有一个奇怪的黑色边框，我没有放进去。它出现时，滚动到或超过底部的网页。
你可以看到下面的“废话”文本上方的细黑线。这些粗俗的文本和底部的粉红色部分的原因是为了排除borderBottom*风格在WebView或其容器上的走样。
另外要注意的是，在重新加载页面时边框会短暂消失，因此它似乎位于WebView的html中。但我不明白它是如何出现或为什么出现的，因为( a)它出现在所有的网站上，b)它没有出现在其他的iOS浏览器中。
我在这里做了什么奇怪的事吗？
截图：
元素和样式：
<V
浏览 3提问于2016-12-16得票数 11
回答已采纳
我将本地文件存储在xcode中，文件在模拟器中加载，但不在ios设备中加载 我正在使用react-native-webview版本5.0.1，在我的webview中，im将sourse传递为{uri：'ICF-Package/ICFPackage/index.html'} <WebView
source={Platform.OS === 'ios' ?
{uri: 'ICF-Package/ICFPackage/index.html'} :
浏览 22提问于2019-10-04得票数 1
1回答
如何防止应用程序在按下设备上的后退按钮时最小化/退出？ 我正在尝试分配“浏览器后退”功能时，按下我的设备上的后退按钮，这是我的代码： import 'react-native-get-random-values';
import React, { useState, useRef, Component, useEffect } from 'react'
import {
Alert,
SafeAreaView,
StyleSheet,
StatusBar,
View,
Text,
ScrollView,
BackHandler
浏览 14提问于2020-04-20得票数 1
回答已采纳
嗨，我正在使用react native的webview来显示网站的url。我希望当用户单击网站内的链接(不属于我的域的行)时，它将打开用户的浏览器与该链接。 如果我有这个域名example.com，并且当我点击一个按钮example.com/about-us时，它变成了类似的东西(这没问题) 但是如果我有这个域名example.com，并且当我点击一个按钮anotherdomain.com (这应该是在用户浏览器中打开，而不是在我的webview应用程序中)时，它会变成这样。 我看过这个主题，但它没有给我需要的东西。我正在使用我的webview应用程序中的Expo。https://stack
浏览 19提问于2019-06-15得票数 0
我正在钛appcelerator中创建webview &尝试从服务器访问一个“远程URL”。我可以在IOS设备中获得该URL的"pdf“内容，但在Android中，我得到了以下错误。
"Enterprise Container Manager" - Policy service is not ready.
我在Android中也会出现同样的错误，即使我硬编码了webview.Is内部的URL，但是Android中有任何限制可以在webview中获取PDF文件吗？
我也得到了日志中的跟踪错误；
11-13 19:43:20.145: E/webview(10765
浏览 3提问于2013-11-13得票数 1
回答已采纳
我正在为我的应用程序在App WebView中实现。我必须打开一些信息页，我必须获得一些数据的基础上，点击任何特定的地方(其中包含不同类型的数据)在网络视图。但是在iOS中，在自动加载任何onShouldStartLoadWithRequest调用时，会导致在HTML中打开不同的URL。但在Android系统中，它的运行情况与预期一样。
<WebView
originWhitelist={["*"]}
style={style}
source={source}
showsVerticalScrollIndicator={showsVerticalScrol
浏览 0提问于2020-03-02得票数 2
1回答
我一直在玩的反应本地网站视图，但我想改变网站的css，以定制的风格。有办法吗？
使用react本机cli & android studio
import React from 'react';
import { StyleSheet, Text, View, Image, StatusBar, ScrollView, TouchableOpacity, WebView, ActivityIndicator } from 'react-native';
class king_of_prussia extends React.Component {
浏览 0提问于2019-05-30得票数 2
回答已采纳
如何在WebView React Native中禁用自动播放。因为我在我的应用程序中尝试WebView播放视频，而我添加了"mediaPlaybackRequiresUserAction={false}“时仍然会自动播放。我的代码如下：
<WebView style={{ justifyContent: 'center', alignItems: 'center'}} source={{uri: url}} mediaPlaybackRequiresUserAction={false} />
请帮帮我，谢谢。
浏览 8提问于2018-12-10得票数 6
WebView卷轴在安卓系统中不起作用。我找了很多地方，也看了很多别的地方，没人能帮上忙。
这就是我定义组件的方式。
<WebView
automaticallyAdjustContentInsets={false}
source={{uri: this.props.url}}
javaScriptEnabled={true}
domStorageEnabled={true}
decelerationRate="normal"
startInLoadingState={true}
scalesPageToFit={
浏览 8提问于2018-10-20得票数 4
回答已采纳
在执行特定操作时，我真的很难理解如何在WebView调用的函数中读取和设置WebView。我的最终目标是：
当用户单击webview中的链接时，显示一个活动指示符。
根据用户单击的URL执行某些操作
我对反应非常陌生，但从我所了解到的情况来看，我应该使用() => function从函数中访问的主对象绑定this。
这在onLoad={(e) => this._loading('onLoad Complete')}上有效，我可以在第一次加载页面时更新状态。
如果我使用onShouldStartLoadWithRequest={this._onShou
浏览 9提问于2017-04-12得票数 2
回答已采纳
我正在构建一个混合反应-本机+红宝石rails应用程序。我正在使用WebView组件中的WebView来检测页面中的更改，并使用它来更改react本机导航菜单。这很好，但是当我尝试使用turbolinks时，页面中可能会有更改，但不会触发onNavigationStateChange。
触发onNavigationStateChange的代码如下
render() {
return (
<WebView
ref={'webview'}
automaticallyAdjustContentInsets={false}
浏览 3提问于2016-05-05得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
