React Native Webview无法加载任何URL（React Native WebView不工作）

Question

我正在尝试在我的应用程序中实现React Native Webview组件，但是Webview没有加载任何网址，只显示白色页面。

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: 'https://m.facebook.com'}} style= {styles.webView}/>
     </View>
   );
 }
});

var styles = StyleSheet.create({
   container: {
     flex:1,
     backgroundColor:  '#ff00ff'
   },webView :{
     height: 320,
     width : 200
   }
});

以下是输出结果的截图。

- Anurag Vijayvergia

---

只是一则备注，webView 包含两种样式。一种用于容器，另一种是标准样式。 style={{ //添加你的样式，例如 backgroundColor: 'transparent' }} containerStyle={[{ //添加你的样式，例如 flex: 0, width: 300, height: 300 }]} - verunar

Answer 1

我遇到了这个问题。当它是唯一返回的组件时，WebView会渲染，但是当它被嵌套在另一个View组件中时却不会。

由于某些原因，设置WebView组件的宽度属性后问题得到解决。

class App extends React.Component {
  render() {

    return (
      <View style={styles.container}>
        <WebView
          source={{uri: 'https://www.youtube.com/embed/MhkGQAoc7bc'}}
          style={styles.video}
        />
        <WebView
          source={{uri: 'https://www.youtube.com/embed/PGUMRVowdv8'}}
          style={styles.video}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'space-between',

  },
  video: {
    marginTop: 20,
    maxHeight: 200,
    width: 320,
    flex: 1
  }
});

- Matthew Vincent

---

在 Android 平台上，设置 flex: 1 对我无效。不过，显式设置 <View /> 中的 height 和 width 可以解决问题。 - agm1984

似乎有点棘手 - 对我来说，一旦移除了justify / align属性，flex：1就起作用了。现在我猜我会从那里开始工作。 - AndyO

嗨@AndyO，你是如何使视频在此情况下达到100％宽度以实现响应式的呢？ - verunar

@verunar，我已经好几个月没使用React Native了。但从代码中我能看出：a）我没有使用内置的Web视图，而是使用了"react-native-webview"；b）只在父组件中设置了"flex: 1"，而对于Web视图本身没有进行任何样式设置。 - AndyO

Answer 2

我遇到了相同的问题。我观察到的是，如果WebView嵌套在组件中，则不起作用。如果组件仅返回WebView，那么一切都正常。

- Rafal Wiliński

---

这应该是正确答案。为webview指定宽度是一个不好的想法，特别是当你需要适配各种宽度不同的设备时。 - Deepak G M

WebView不就是返回一个WebView组件的吗？ - Sandy

Answer 3

通过其他用户的答案，我成功地使我的React Native与Webview在视图内外都能正常工作。我的问题归结为两个方面。第一，因为我使用的是Android模拟器，并且在代理后面，所以我只需要进入Android模拟器中的浏览器（Chrome）并登录公司代理即可。其次，有些网站可以正常工作，而有些则无法工作。无论Webview是否嵌套在View标记内，像CNN.com和Slack.com等一些网站都可以正常工作，但是无论我尝试了什么设置，Google.com都无法工作（即使代理明确允许Google.com）。最后，当我重新构建应用程序并将新应用程序推送到模拟器时，有时加载任何网站都需要很长时间。但是一旦站点加载完成，链接就会快速响应。因此，如果构建后一开始没有看到什么，请耐心等待。希望这对其他人有所帮助。

我的最终app.js

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Dimensions
} from 'react-native';

import { WebView } from 'react-native';

const deviceHeight = Dimensions.get('window').height;
const deviceWidth = Dimensions.get('window').width;

type Props = {};
export default class App extends Component<Props> {

  render() {
    return (
<View style={{flex:1}}>
  <WebView
   style={styles.webview}
   source={{uri: 'https://www.slack.com'}}
   javaScriptEnabled={true}
   domStorageEnabled={true}
   startInLoadingState={false}
   scalesPageToFit={true} />
</View>
    );
  }
}

const styles = StyleSheet.create({
  webview: {
    flex: 1,
    backgroundColor: 'yellow',
    width: deviceWidth,
    height: deviceHeight
  }
});

- Brandon Culley

---

不需要设置 flex: 1，因为你已经覆盖了 deviceWidth 和 deviceHeight。 - Stack Overflow

Answer 4

WebView 在安卓上表现良好。然而，对于某些网页，您需要启用 JavaScript 和 DOM 存储。

<WebView style={styles.webView}
    source={{uri: 'https://google.com/'}}
    javaScriptEnabled={true}
    domStorageEnabled={true}
    startInLoadingState={true}
    >
</WebView>

- Vince Yuan

Answer 5

如果您希望组件渲染整个页面，您需要用具有flex: 1的View将其包装起来。下面的代码对我有效：

<View style={{flex:1, alignItems: 'flex-end'}}>
  <WebView
   source={{uri: this.state.webContentLink}}
   startInLoadingState={true}
   scalesPageToFit={true} />
</View>

- LilyJ

Answer 6

WebView 将被迁移到react-native-webview。

除了这种方法外，其他所有的答案都不起作用：

npm install --save react-native-webview

然后按照以下方式使用：

<View style={{ flex: 1, alignItems: 'flex-end' }}>
      <WebView
        source={{
          uri: 'https://www.yahoo.com',
        }}
        startInLoadingState={true}
        scalesPageToFit={true}
        style={{
          width: 320,
          height: 300,
        }}
      />
</View>

- Jakir Hossen

Answer 7

<View>
    <WebView
        source={{uri: this.props.link}}
        style={styles.webview}
        javaScriptEnabled={true}
        domStorageEnabled={true}
        startInLoadingState={true}
    />
</View>

并按以下方式进行样式设置：

const React = require('react-native');

const { Dimensions } = React;

const deviceHeight = Dimensions.get('window').height;
const deviceWidth = Dimensions.get('window').width;

export default {
  webview: {
      width: deviceWidth,
      height: deviceHeight
  }
};

所有这些都是为了处理不良的Webview尺寸，因此只需设置特定的高度和宽度（例如上面的deviceHeight和deviceWidth）。

- Viet Anh Do

Answer 8

截至2020年6月(注明日期是因为React Native的答案似乎很快就会过时)，最简单的解决方案似乎是：

import React from 'react'
import { View, StyleSheet } from 'react-native'
import { WebView } from 'react-native-webview'

export const ComponentWithWebView = () => {
  return (
    <View style={styles.view}>
      <WebView source = {{uri: 'https://www.google.com/'}} />
    </View>
  )
}

const styles = StyleSheet.create({
  view: {
    alignSelf: 'stretch',
    flex: 1,
  }
}

这将导致一个WebView填充可用空间并嵌套在View中。我认为在将WebView放置在View中时面临的典型问题是，View期望子元素强制View扩展（即，Text组件会占用一定的宽度和高度，然后View进行调整）。另一方面，WebView会扩展到父组件的大小，除非传递了指定width的样式。因此，简单的<View><WebView /></View>会导致0宽度以及屏幕上没有显示任何内容。之前的解决方案通过设置WebView的宽度效果良好，但需要获取设备尺寸（可能不是期望的宽度），或者View具有onLayout函数并且有某种方式来扩展View以达到所需的空间。我发现最简单的方法是为View应用flex:1和alignSelf:'stretch'，以填充所需的空间，然后WebView自动跟随适应。

希望这能在变得过时之前帮助到某些人！

- M H Chu

Answer 9

最近我遇到了同样的问题。我发现

alignment: 'center'

是导致问题的原因。我将其注释掉后，webView立即加载成功。我在这里找到了解决方案： https://github.com/facebook/react-native/issues/5974 'brunocvcunha'的回复对我有用。

- Devashree

Answer 10

让我举一个最简单的例子，它可以无缝地工作：

import React from 'react';
import { WebView  } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <WebView
      source={{uri: 'https://github.com/facebook/react-native'}} 
    />

    );
  }
}

不要将WebView组件添加到创建问题的视图中，而是显示视图的样式，而不是呈现webview url。

- Pikachu-go