React Native Webview未加载任何URL(React本机Web视图无法正常工作)

Question

我正在尝试在我的应用程序中实现react本机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: 'https://m.facebook.com'}} style= {styles.webView}/>
     </View>
   );
 }
});

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

以下是输出的屏幕截图.

Answer 1

我有这个问题.当WebView是唯一返回的组件时,它将呈现,但在嵌套在另一个View组件中时则不会呈现.

由于原因,我不完全确定通过在WebView组件上设置width属性来解决问题.

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
  }
});

Answer 2

我面临同样的问题.我观察到的是,WebView如果它是嵌套的,则不起作用.如果组件只返回WebView,那么一切都很好.

Answer 3

使用其他用户的答案，我能够通过 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
  }
});

Answer 4

WebView在Android上运行良好.但是,您需要为某些网页启用javascript和dom存储.

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

Answer 5

如果您希望组件呈现整个页面，则需要使用具有flex: 1. 下面的代码对我有用：

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

Answer 6

<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 作为上面的例子）。

Answer 7

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>

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我相信将 a 放置在 a 中时面临的典型问题View是View期望子级强制展开View（也就是说，Text组件将占用然后容纳的一定宽度和高度View）。WebView另一方面，除非传递指定width. 因此，简单的<View><WebView /></View>结果是宽度为 0 并且屏幕上不显示任何内容。早期的设置WebView宽度的解决方案效果很好，但需要获取设备尺寸（可能不是所需的宽度），或者需要View具有onLayout功能并有某种方法将其扩展View到所需的空间。我发现最简单的方法是应用flex: 1和alignSelf: 'stretch'来根据View需要填充空间，然后WebView自动跟进。

希望这可以在它过时之前对某人有所帮助！

Answer 9

下面是对我有用的代码片段。

render: function(){
   return(
     <View style={styles.container}>
      <WebView url={'https://m.facebook.com'} style= {styles.webView}/>
     </View>
   );
 }