标签: react-native-webview
React Native display PDF in Android web view
I have a React Native app in which at some page I've got a web view (react-native-webview) for displaying PDFs from our server.
In iOS everything works fine, in Android, whenever I try to view the file I got:
Cannot downoad files as permission was denined. Please provide permission to write to storage, in order to download files.
I've then added <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> to my manifest. Now, I'm getting the following alert:
I think it's pretty scary …
android android-permissions react-native react-native-android react-native-webview
推荐指数
解决办法
查看次数
react-native-webview的stopLoading方法导致网站死机
我想在 react-native 中拦截我的 webview 中链接的点击并执行自定义操作，而不是按照官方指南中的描述导航到链接的目标。这是我所做的：
import React from 'react';
import {View, Linking} from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';
import {WebView} from 'react-native-webview';
export default class WebViewScreen extends React.Component {
static navigationOptions = {
title: 'Produck',
};
constructor(props) {
super(props);
}
/**
* Defines content and look of the WebViewScreen.
*/
render() {
const DEFAULT_URL = "https://www.myurl.de/index.html";
return (
<View style={{ flex: 1 }}>
<WebView
ref = {webview => {
this.myWebView = webview;
}}
renderLoading = {this.renderLoading}
startInLoadingState = …推荐指数
解决办法
查看次数
想要在 React Native CookieManager.clearAll() 中清除 webView 的缓存；无法在 iOS 中工作
想要从 React Native 中的 Reaact-native-webView 清除缓存，{CookieManager.clearAll();} - 在 iOS 中不起作用
推荐指数
解决办法
查看次数
如何防止react-native-webview中的默认选择工具提示
基本说明
我正在 webview 中渲染一个 epub 文件，我希望用户无法复制文本，但我想让他出于某种原因选择文本（突出显示和一些东西）
。
默认提示：
我只是想禁用此默认工具提示，并且在进行任何选择后不显示它。
我正在搜索，发现我可以通过使用以下两行代码来阻止用户选择：
"-webkit-user-select": "none",
"user-select": "none",
但这不是我想要的。我想让用户选择文本而不让他们复制它。。
请帮助我谢谢
推荐指数
解决办法
查看次数
Webview 未出现在 Expo Web 中
在 expo 移动应用程序中工作正常，但通过运行命令在 Web 浏览器上打开 Expo 应用程序时，相同的代码不会显示任何内容expo start --web
这是示例代码
<WebView
originWhitelist={['*']}
source={{ uri: 'https://sofit.ltd' }}
style={{marginBottom:100, height:"100%", width:"100%" }}
/>
推荐指数
解决办法
查看次数
React Native 问题：WebView 已从 React Native 中移除
我昨天使用 react-native-cli 构建了新的 React Native 项目。但是当用我的安卓手机运行这个项目时，我在红屏上出现了这个错误。
不变违规：WebView 已从 React Native 中删除。现在可以从“react-native-webview”而不是“react-native”安装和导入它。请参阅“ https://github.com/react-native-community/react-native-webview ”。
我从未使用过 WebView，这是我的“package.json”。
{
"name": "",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"react": "16.9.0",
"react-native": "0.61.5",
"react-native-image-slider": "^2.0.3",
"react-native-svg": "^9.13.6",
"react-navigation": "^4.0.10",
"react-navigation-drawer": "^2.3.3",
"react-navigation-stack": "^1.10.3",
"react-redux": "^7.1.3",
"redux": "^4.0.4"
},
"devDependencies": {
"@babel/core": "^7.7.5",
"@babel/runtime": "^7.7.6",
"@react-native-community/eslint-config": "^0.0.5",
"babel-jest": "^24.9.0",
"eslint": "^6.7.2",
"install-peers": "^1.0.3",
"jest": "^24.9.0",
"metro-react-native-babel-preset": "^0.57.0",
"react-native-gesture-handler": "^1.5.2", …推荐指数
解决办法
查看次数
在 React Native WebView 中加载捆绑的静态资产
我有一个 React Native 项目，我试图将一些预先生成的 HTML、JS 和 CSS 与应用程序捆绑在一起，并让 WebView 使用该react-native-community/react-native-webview库呈现 Web 资产。我可以很好地加载 index.html 文件，但它不会加载其他资产，因为它似乎指向错误的路径。我试过使用，baseUrl但似乎不起作用。
我的 React Native 代码如下所示：
<WebView
source={{ uri: './assets/index.html' }}
allowFileAccessFromFileURLs={true}
allowUniversalAccessFromFileURLs={true}
originWhitelist={["*"]}
mixedContentMode='always'
/>
然后作为构建过程的一部分，我的资产目录具有以下结构：
ios
|- assets
|- index.html
|- js
|- main.js
|- css
|- main.css
我将此作为 Xcode 中复制捆绑资源步骤的一部分，因此资产目录包含在 ios 应用程序捆绑包中。
index.html 里面是这样的代码：
<html>
<head>
<link rel="stylesheet" href="/css/main.css">
</head>
<body>
Hello World!
<script type="text/javascript" src="/js/main.js"></script>
</body>
</html>
回到最初的问题，当我运行这个应用程序时，我可以看到“Hello world！” 所以这告诉我 HTML 正在加载，但是 CSS 和 JS 文件没有加载，因为据我所知它正在尝试加载file:///assets/js/main.js而不是相对于应用程序包位置。有什么办法可以让它按需要工作吗？
/js/main.js如果可能的话，我真的非常想避免更改脚本 …
推荐指数
解决办法
查看次数
如何更改 react-native webview 的 font-family (font-family.ttf from assets)
我正在使用react-native webview在我的react-native应用程序中显示一些网络内容
。和我的应用程序font-family和webview font-family是不同的。我想webview font-family从应用程序更改。
是否有变化的任何方法font-family的webview（自定义字体从资产目录），请帮我..谢谢
推荐指数
解决办法
查看次数
在反应本机webview中检测href链接点击
<WebView
bounces={false}
showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={false}
javaScriptEnabled={true}
originWhitelist={['*']}
source={{ uri:"https://www.google.com" }}
mixedContentMode={'never'} // security
startInLoadingState={true} // when starting this component
onMessage={onMessage}
javaScriptEnabledAndroid={true}
/>
我在网络视图中使用上面的代码。我希望当我们进行谷歌搜索时得到一些结果。因此，当任何用户单击任何链接时，我都会检测到该用户的单击。仅用户单击链接而不是导航。那么我可以在链接点击时注入任何 javascript 回调吗？这样我就可以在用户点击时执行一些任务。
就像我想修改用户点击的链接一样。假设用户单击“wikipedia.com”并且我想在此网址中添加一些键，然后用户将重定向到修改后的网址，如下所示/
wikipedia.com/?用户点击
推荐指数
解决办法
查看次数
包react-native-webview已被忽略，因为它包含无效的配置
这是版本旧版本=>“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 问题。如果我回到旧版本它仍然存在。预先感谢，请等待您的帮助
推荐指数
解决办法
查看次数