在React Native中设置WebView的样式
React Native是一种用于构建跨平台移动应用程序的开源框架。在React Native中，可以使用WebView组件来集成Web页面或应用到移动应用中。要设置WebView的样式，可以通过以下步骤进行操作：
- 导入WebView组件：首先，在你的React Native项目中导入WebView组件。可以使用以下代码将WebView组件导入到你的文件中：
import { WebView } from 'react-native-webview';- 创建WebView组件：在你的组件中创建一个WebView组件，可以通过以下代码进行创建：
<WebView
source={{ uri: 'https://www.example.com' }}
style={{ width: 300, height: 200 }}
/>- 设置样式：为了设置WebView的样式，可以在WebView组件的
style属性中添加样式对象。例如，可以通过width和height属性来设置WebView的宽度和高度。 - 添加其他样式属性：除了宽度和高度之外，还可以通过添加其他样式属性来自定义WebView的样式，例如背景颜色、边框样式、字体样式等。可以根据具体需求添加相应的样式属性。
以下是一个示例代码，展示了如何在React Native中设置WebView的样式：
import React from 'react';
import { View, StyleSheet } from 'react-native';
import { WebView } from 'react-native-webview';
const App = () => {
return (
<View style={styles.container}>
<WebView
source={{ uri: 'https://www.example.com' }}
style={styles.webview}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
webview: {
width: 300,
height: 200,
backgroundColor: 'lightgray',
borderRadius: 10,
},
});
export default App;这段代码中，container样式用于居中显示WebView，webview样式设置了WebView的宽度、高度、背景颜色和圆角半径。
对于React Native中WebView的更多样式设置和属性，你可以参考React Native官方文档中WebView的相关部分：React Native WebView
相关·内容
我用的货币是React，昨天我和WebView一起工作，但是我的项目显示在blanck屏幕上，当我编译我的项目时，我通过我的手机看到了所有的东西，我已经尝试了所有的方法来解决它，但是我没有成功，有人能帮我吗？，我不知道该怎么做。
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { WebView } from 'react-native-webview';
const styles = StyleSheet.crea
浏览 4提问于2021-05-21得票数 1
在我的项目中，我使用react-native-render-html来呈现html。但是表内容没有正确显示。
import RenderHtml from 'react-native-render-html';
import { WebView } from 'react-native-webview';
const html = `
<html>
<head></head>
<body>
<style>
浏览 12提问于2022-08-13得票数 -1
回答已采纳
我的WebView首先加载，然后按TouchableOpacity。我可以在后台webview更改后执行此操作，而无需重新启动webview吗？
import React, {Component} from 'react';
import {View,Text} from 'react-native'
export default class TestScreen extends Component {
render() {
return (
<View >
<TouchableOpacity onPress={/*
浏览 57提问于2018-12-13得票数 2
所以这里是我希望它工作，我正在使用网页视图加载zara网站，他们的登录表单电子邮件元素，你可以在这里查看 <input id="email" name="email" type="text" value="" autocomplete="off"
我希望当我的应用程序webview登陆zara登录页面时，react原生应用程序可以自动填写登录电子邮件和密码字段。下面是我的attampt: import React from 'react'；
import { StyleSheet } from
浏览 0提问于2020-02-05得票数 0
我有一个带有WebView的简单功能组件，在TabNavigator中，当选项卡聚焦时，我想注入一些javascript，如下所示：
import React, {useRef, useEffect} from 'react';
import {WebView} from 'react-native-webview';
export default (props) => {
const webViewRef = useRef();
React.useEffect(() => {
const unsubscribe = props
浏览 0提问于2020-09-09得票数 4
回答已采纳
1回答
网站显示在网页上
目前的做法是，我正在创建一个浏览器应用程序使用的反应-本机。谷歌和其他网址将被显示。但是，特定的站点没有显示，它就变成了一个白色的屏幕。
地址是https，该站点在PC或真正的机器GoogleChrome.上正确显示。
这是否意味着站点的SSL存在缺陷？
请告诉我。
我们在下面的代码中使用source = {{uri: 'https://www.google.com/'}}进行站点指定。
##App.js
/**
* Sample React Native App
* https://github.com/facebook/react-native
浏览 0提问于2018-08-04得票数 1
3回答
问题来了。WebView在中为空。但是，链接是有效的。守则：
import React from 'react';
import { StyleSheet, View, WebView } from 'react-native';
import { Constants } from 'expo';
export default class App extends React.Component {
render() {
return (
<View>
<View style={styles.sta
浏览 0提问于2018-04-07得票数 2
回答已采纳
当尝试使用react- native -webview组件在react native中的webview中加载html文件时。该组件加载文件，但不加载其所有资产，另一方面，如果我使用react-native中已弃用的Webview组件加载同一文件(已弃用的Webview组件可以正常工作)
浏览 1提问于2020-01-30得票数 0
下面，我试过了，但Webview被声明为重复的。获取时出错。 import { WebView } from 'react-native-webview-old';
import { WebView as WebViewLatest } from 'react-native-webview-latest';
let WebView;
if (Platform.OS === 'android') WebView = require('react-native-webview-latest').WebView;
else if (
浏览 16提问于2021-09-07得票数 0
我正在用博览(SDK v35)构建一个(SDK，v35)，当我将二进制文件交付到时，我收到了一个警告，很多人已经收到了这样的警告：
苹果将停止接受使用 API的应用程序的提交。
我意识到这个警告与v7.0.1之前的react-本机-webview有关，如果UIWebView在任何地方使用，包括依赖项，它都会出现。
但是，我已经彻底清理了代码，以至于grep -r UIWebView ./*显示为空(我甚至删除了注释)。我还确保所有依赖项都使用了一个版本的react本机-webview，这个版本比修补的7.0.1版本要大。这是来自grep -r webview ./node_modules/*
浏览 0提问于2019-12-08得票数 5
回答已采纳
Bug描述:我使用Webview指导的站点在ios模拟器中打开，但在安道尔模拟器中不起作用。
复制：
react-native init AwesomeProject cd AwesomeProject react-native run-android
&& my code
预期行为：。与ios模拟器工作相同
Screenshots/Videos:
Environment: - OS: macOS - OS版本: 10.15.3 -react原生版本: 0.62.2 -本机-webview版本: 10.2.3
浏览 3提问于2020-05-31得票数 0
WebView可以在IOS模拟器中工作吗？ 下面的代码没有返回错误，也没有显示任何内容。 import React, { Component } from 'react';
import { WebView } from 'react-native';
class MyTest extends Component {
render() {
return (
<WebView
source={{uri: 'https://github.com/facebook/react-native'}}
浏览 73提问于2019-10-19得票数 1
回答已采纳
我试图在我的应用程序中实现本机webview组件，但是web视图并没有加载任何url --它只是显示白色页面。
var React = require('react-native');
var{
View,
Text,
StyleSheet,
WebView
} = React;
module.exports = React.createClass({
render: function(){
return(
<View style={styles.container}>
<WebView source={{uri: &
浏览 23提问于2016-02-17得票数 52
回答已采纳
我使用react-native-webview在我的React Native应用程序中呈现WebView。在iOS上一切正常，但在安卓系统上，当渲染WebView时，我的屏幕会闪烁(先是黑色，然后是白色，然后显示网页)。 根据this answer的说法，我试图在我的AndroidManifest.xml的<application>标签中添加android:hardwareAccelerated="false"，但这并没有解决我的问题。(此外，它还会隐藏使用elevation style属性创建的所有阴影效果) <DelayedComponent key={
浏览 127提问于2019-01-10得票数 7
回答已采纳
我试图模拟一个附带了react本机(而不是第三方模块)的模块，比如LayoutAnimation。
import * as RN from 'react-native'
RN.LayoutAnimation = jest.fn()
但测试失败的有：
TypeError: Cannot read property 'decelerationRate' of undefined
at Object.<anonymous> (node_modules/react-native/Libraries/Components/WebView/WebView
浏览 6提问于2017-07-05得票数 7
回答已采纳
我使用react-native-webview加载一个具有多个iframes的URL。我正在使用injectedJavaScript方法向加载的网站注入javascript。代码只在顶部框架中注入，而不是在iframes中注入。
对于android，我将重写public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request)方法来拦截我的HTML并将所需的Javascript添加到其中。
对于iOS，经过一些谷歌搜索后，我发现一些结果指向将forMainFrameOnly设置为“否
浏览 5提问于2019-08-29得票数 5
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
因此，我使用React-native WebView来显示本地html文件。我的文件位于/storage/emulated/0/Android/data/com.package/files/sample.html。我已经使用React-Native-fs在这个位置写入了文件。 现在我有一个webview声明为： <WebView source={{uri : 'file:///storage/emulated/0/Android/data/com.package/files/sample.html'}}/> 因此，每当我运行此程序时，WebView都会向我显示一个
浏览 61提问于2020-07-17得票数 0
回答已采纳
1回答
我有一个用react-native开发的应用程序。使用了react-native-webview和react导航插件。
当我打开一个包含webview的界面，然后跳转到另一个包含webview的界面时，我发现它们无法共享缓存。上一页引用的静态文件在下一页再次加载。
但是如果我在同一个网页视图中重定向网页的url，缓存就能正常工作，一切都正常。
react-native-webview使用默认配置，静态文件请求的缓存控制是正常的。
我不知道android下的webview性能是这样的，还是另一个问题？
<WebView
ref={this.webview}
浏览 3提问于2020-07-30得票数 3
我们有一个用于移动平台的React Native应用程序和一个用于web的React应用程序，我们在这两个平台上都使用redux进行状态管理，我们正在考虑使用react native中的WebView，这些WebView将从APK内部的react捆绑包中本地提供服务。我想检查当通过WebView通信时，是否可以通过window.postmessage在react native和react本地捆绑组件之间连接react native状态。
下面是我在这个用例中使用的一些链接。这更多的是一个可能的问题，请让我知道从哪里开始。
浏览 2提问于2020-04-26得票数 2
我正在尝试使用react原生webview并将其自动链接到我们的react原生代码库。为此，我执行了以下步骤，并获得了在本文末尾发布的错误。你能帮我修复这个错误吗？
我添加了
include ':react-native-webview'
project(':react-native-webview').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webview/android')
添加到settings.gradle文件，然后
imple
浏览 4提问于2020-05-20得票数 0
3回答
我试着在webview中使用react本机定向来获得它是唯一旋转的视图。
import React, {useEffect} from 'react';
import { WebView } from 'react-native-webview';
import Orientation from "react-native-orientation"
export function GameWebViewScreen({navigation}) {
const link = ****
useEffect(() => {
Orien
浏览 3提问于2020-01-27得票数 2
回答已采纳
我想将我的WebView设置为与我想要显示的内容相同的高度，仅此而已。 我有一个包装在视图中的WebView： <View style={height: height}>
<WebView
...
onMessage={event => console.log(event.native.data)} // this returns height of element in px
/> 在WebView中，它只是一个div。我正在使用postMessage向我的React Native应用发送div在WebView上的高度。如何在React
浏览 38提问于2021-07-22得票数 0
当我尝试在我的应用程序中打开包含html webview中的照片的帖子时，收到这个奇怪的错误，该应用程序是一个react原生应用程序，并从wordpress后端检索帖子。 https://i.imgur.com/738mF4Y.png 将视图更改为内联，但未成功 我的webview index.js /** @format */
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import {
View,
Image,
Dimensio
浏览 33提问于2019-05-27得票数 0
我正在开发一个在webview中加载example.com的React Native应用程序。我想知道在React Native webview中使用postMessage将用户名和密码传递给React Native是否安全。你觉得还好还是不安全？
这是web应用程序(example.com)将用户名和密码发送到React Native
这是React Native <WebView onMessage={m => this._onMessage(m)} />，用于接收用户名和密码以验证用户身份。
它看起来会工作，但不确定它是否安全。如果没有，有没有办法从Reac
浏览 4提问于2020-05-07得票数 2
我们有一个应用程序，是一个单页面的react应用程序。我们最近发布了React Native版本的应用程序，我们使用Webview 来封装这个单页面的react应用程序！
我想触发一个动作来区分通过正常的react应用程序访问的用户和用于分析跟踪的web视图。我做了一个假设，webview总是会暴露出window.ReactNativeWebView接口：
所以我写了这段代码，在react webapp上注入了一个事件侦听器：
window.addEventListener('DOMContentLoaded', () => {
// If there ReactNa
浏览 1提问于2021-03-08得票数 0
我尝试在我的应用程序中添加一个web视图，但是我得到了这个错误： ../node_modules/react-native-webview/lib/WebView.js
Module not found: Can't resolve 'react-native-web/dist/exports/View' in 'C:\Users\Nikola\node_modules\react-native-webview\lib' 这是我的最小代码： import { WebView } from 'react-native-webview';
浏览 72提问于2021-10-04得票数 0
我使用的是react-本机-webview-文件上传-android，但我想用react-本机-webview-android替换它。
我运行了以下命令：
npm uninstall react-native-webview-file-upload-android
npm install --save react-native-webview-android
npm link react-native-webview-android
我将app.js中的导入更改为
import AndroidWebView from 'react-native-webview-file-upload-
浏览 0提问于2019-01-06得票数 1
回答已采纳
我在react-native中安装了包
我已经实现了选项卡导航，其中一个是以webview格式实现的。
我的问题是，如果我按下Android上的后退物理按钮，我会从应用程序本身转到上一个选项卡，而不是从网页视图返回。
我已经在互联网上应用了webview的后退按钮，但我还没有这样做。
我试图在调试时显示onNavigationStateChange日志，但在第一次启动时加载url后，url被移动时，它没有更新。下面是我实现的代码：
import React from "react";
import {BackHandler} from "react-native"
浏览 6提问于2019-03-12得票数 9
我在堆栈溢出上多次看到过这个问题，但没有明确的答案。我希望这个问题能对我和其他人有所帮助。 我希望使用react- native -webview在react native中呈现一个URL 我使用expo init my-app启动了一个空白的react原生项目。我运行了npm i react-native-webview和react-native link react-native-webview。然后，我创建了一个定义如下的文件 import React, { Component } from 'react';
import { WebView } from 'r
浏览 21提问于2020-12-16得票数 0
我有一个在React Native Modal中显示的WebView。我想隐藏一段时间的模态，在回调时，我想再次向用户显示一些输入的模态。 问题是，如果我更改状态并隐藏React Native模式，那么它将卸载具有WebView的子组件，如果我重新显示它，WebView将重新加载。 我只想隐藏模式，而不是杀死它，这样我就可以从用户离开的地方显示它。我尝试过React导航，但这也不能解决问题。 任何方向都会有帮助。
浏览 27提问于2020-01-15得票数 1
谁能帮助我如何在React Native中检测Webview按钮点击事件？如下面的代码所示，我的WebView (index.html)中有一个按钮，我希望检测React Native中的click事件并执行onClick方法。我尝试了多种方法，但都不能成功。提前谢谢你了。
我的MyApp.js
import React from 'react';
import { AppRegistry, View, WebView, StyleSheet} from 'react-native'
export default class MyApp extends Rea
浏览 2提问于2017-12-22得票数 6
回答已采纳
我在NPM，https://www.npmjs.com/package/react-native-progress-webview发现这个项目很有趣。 然而，我遵循了指令，它显示了以下错误： error: bundling failed: Error: Unable to resolve module `react-native-progess-webview` from `mycomponent.js`: Module `react-native-progess-webview` does not exist in the Haste module map 我已经安装了'react
浏览 16提问于2019-10-03得票数 1
1回答
app.Lines中的所有多行文本标记上都有行，只显示在iPhone Plus上，而不是在iPad、tab、android或任何其他设备上。
知道怎么修吗？文本上的线条类似于下面的图像：
import React, {Component} from "react";
import {
Image,
View,
StatusBar,
TouchableOpacity,
WebView,
Dimensions,
Linking,
ScrollView,
NetInfo,
Alert
} from "react-native";
浏览 0提问于2018-02-13得票数 0
回答已采纳
1回答
react：16.9.0
react原生：0.61.5，
发行：
我使用react-native-community/react-native-webview，在我的应用程序中呈现一个web视图。我的URL方案看起来类似于intent://cdn.glitch.com/ (基本上是一个WebAR，它基本上在相机的帮助下在周围的空间中打开一个3D模型)。它抛出一个错误，说明是ERROR_UNKNOWN_URL_SCHEME。
我试过的是：
在WebView模块被提取为react本机社区包并使用随附的WebView组件之前，将Reactive原生版本降至0.59.0。在这种情况下，URL方案工
浏览 3提问于2020-01-11得票数 1
由于React Native webview组件只支持iOS，我想知道还有什么其他选项可以用来解析android的标记字符串。有人在React Native for Android应用中使用过markdown吗？
浏览 1提问于2015-11-21得票数 3
我使用了两个社交登录，都是引用react-native-webview依赖项。
安装的版本:react-native-linkedin(使用react-native-webview 7.0.5)，react-native-instagram-login (使用react-native-webview 7.5.1)，react-native-webview ^7.5.1
你能告诉我如何解决这个问题吗？
屏幕截图
浏览 1提问于2020-04-27得票数 0
如何通过在expo中按下按钮来加载webview内容?我是否必须使用导航？ import * as React from 'react';
import { WebView } from 'react-native-webview';
import {View} from 'react-native'
export default function App(){
return (
<View>
<Button title={'CLICK'} onPress={()=> &l
浏览 41提问于2021-06-24得票数 0
为了添加它，我运行了以下命令：
yarn workspace mobile add react-native-webview
从字面上看，我已经查看了下面的错误所指定的node_modules文件夹，react-native-webview显然就在那里。但是，这个错误仍然会被抛出吗？我甚至执行了步骤react--当一个模块显示为缺失但实际上存在时，红色错误屏幕上的本地轮廓就会显示出来。
Error: Unable to resolve module `react-native-webview` from `index.js`: react-native-webview could not be
浏览 162提问于2020-06-03得票数 5
2回答
我在我的整个React原生应用程序中使用自定义字体。我已经使用react-native link命令将它们链接起来。除了Android的Webview组件之外，它们可以在任何地方运行。它在iOS Webview中工作正常。
import React, { Component } from "react"
import { View, StyleSheet, Text, WebView, ScrollView, Image } from "react-native"
import HTMLView from "react-native-htmlview&#
浏览 1提问于2017-03-22得票数 12
我正在尝试在react-native中的webView和使用React-360创建的web应用(当然还有React)之间创建一种通信。我正在使用react-native-webview，并在此链接中遵循以下指南来创建通信：https://github.com/react-native-community/react-native-webview/blob/master/docs/Guide.md使用页面中的示例，使用一个简单的html页面(类似于链接中的示例)，在脚本部分使用函数window.ReactNativeWebView.postMessage(data)它工作得很好： <W
浏览 46提问于2020-06-18得票数 3
我在一个WebView组件中运行一个单独的web应用程序，在一个React Native应用程序中，我试图让它们正确地通信。 React Native to WebView工作得很好。我可以调用webView.postMessage(...)并在document.addEventListener("message", ...)中接收它，没有任何问题。 然而，当我尝试另一种方式(WebView到本机)时，对window.postMessage triggers a url change via window.location的调用似乎重新加载了整个WebView，并破坏了其中的
浏览 77提问于2019-01-19得票数 6
我试图在react本机样板(模板:类型记录)中使用WebView。我正在使用来自WebView库的react-native-webview。
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* Generated with the TypeScript template
* https://github.com/react-native-community/react-native-template-typescript
*
* @format
*/
import R
浏览 11提问于2022-03-04得票数 2
1回答
简短摘要：
试图使用WebView从'react-native-webview'呈现'react-native-webview'内容的移动应用程序构建的反应本土化是我的一个刺。
长篇摘要：
在过去的几个月里，我已经使用PHP 7为我的公司建立了大约10个网站。现在，由于欧盟的一些资金支持，我创建的这些公司中的大多数也需要移动应用。只为安卓系统拥有它们就足够了，但如果iOS也有它们的话，那就太好了。
在进行了相当多的googling搜索之后，我(可能愚蠢地)决定了最好的方法是使用Reacti原住民。
现在要详细说明的是，这些应用程序将是非常简单和无用的应用程序，只
浏览 6提问于2019-09-19得票数 2
我正在使用react native构建一个应用程序，在该应用程序中，我希望使用react-native-webview访问web应用程序。每次都需要登录才能登录web应用程序。对于使用amplify的身份验证。是否可以通过自动登录连接web应用程序？因为对于使用相同amplify的react和react native，配置用户池id
浏览 0提问于2020-02-26得票数 4
我正在使用react-native实现magic.link，但在导入Magic时出现错误
import { Magic } from "@magic-sdk/react-native";
错误：
Attempted import error: 'WebView' is not exported from 'react-native'.
我认为这是因为react-native-webview的子依赖已经被移除了，但我确实安装了它。npm install --将react-native-webview@^8.0.0保存到教程中吗？卡住了一段时间，不确
浏览 3提问于2021-11-29得票数 0
1回答
如何让https://xr-spinosaurus.glitch.me/在React Native WebView组件中工作？ import React, { Component } from 'react';
import { WebView } from 'react-native';
export default class MyWeb extends Component {
render() {
return (
<WebView
source={{uri: 'https://xr-spinosa
浏览 43提问于2020-05-03得票数 2
回答已采纳
在我的应用程序中尝试实现的本机WebView组件，但是web视图没有加载它显示以下输出的动态WebView。
import React, {Component} from 'react';
import {View} from 'react-native';
import {WebView} from 'react-native-WebView';
export default class App exten
浏览 0提问于2021-10-20得票数 0
我使用的是iOS的一个旧版本--本机-webview，在一个反应本地应用程序中使用最新版本的Android。应用程序在iOS中成功运行，但是Android给出了一个错误，上面写着“本机模块RNCWebView试图覆盖RNCWebViewModule.”，我在MainApplication.java中检查了getPackages()，但是没有重复创建或多个导入，用于react-本机-webview或creation原生-webview-最新版本。
另外，我还说
@Override
public boolean canOverrideExistingModule() {
浏览 5提问于2021-06-07得票数 2
回答已采纳
我正在尝试在WebView中显示一个下载的pdf文件。我正在使用react-native-webview (https://github.com/react-native-community/react-native-webview)和rn-fetch-blob下载它。 基本上，我有一个渲染，它只是一个WebView组件： if(this.state.path)
return
<WebView
source={{ uri: this.state.path }}
style={{ flex: 1 }}
浏览 131提问于2020-01-27得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
