React native React本机web视图未加载任何url（React本机web视图不工作）

我试图在我的应用程序中实现react native 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
   }
});

var React=require（'React-native'）；
变量{
看法
文本，
样式表，
网络视图
}=反应；
module.exports=React.createClass({
render:function（）{
返回(
);
}
});
var styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#ff00ff”
}，网络视图：{
身高：320，
宽度：200
}
});

下面是输出的屏幕截图。

---

我也遇到了同样的问题，花了一天时间试图解决它。我复制了uiexplorerwebview示例，但没有成功

我最终升级了react，创建了一个新的react原生项目，并在其中复制了文件，这就解决了问题

---

我希望我能有一个更好的答案来解释为什么会这样做，但希望下面的代码对我有用

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

render:function（）{
返回(
);
}

我也面临同样的问题。我观察到的是

WebView

如果嵌套就不起作用。若组件只返回WebView，那个么一切都正常。

我遇到了这个问题。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
  }
});

出于某些原因，我不能完全确定这个问题是否通过在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
  }
});

类应用程序扩展了React.Component{
render（）{
返回(
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
对齐项目：“居中”，
justifyContent:'之间的空间'，
},
视频：{
玛金托普：20，
最大高度：200，
宽度：320，
弹性：1
}
});

如果希望组件呈现整个页面，则需要使用具有

flex:1

的视图对其进行包装。以下代码适用于我：

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

---

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

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

---

所有这些都是为了处理糟糕的webview维度，所以也只需设置一个特定的高度和宽度（deviceHeight和deviceWidth，如上所示）。

使用其他用户的答案，我能够在webview在视图内部和视图外部工作的情况下获得我的react native。我的问题归结为两件事。在android emulator上和代理之后，我只需在android emulator中进入我的浏览器（chrome）并登录到公司代理。第二，有些网站有效，而另一些则不起作用。无论webview是否嵌套在视图标记中，一些网站如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
  }
});

import React，{Component}来自'React'；
进口{
平台，
样式表，
文本，
看法
尺寸
}从“反应本机”；
从“react native”导入{WebView}；
const deviceHeight=维度.get（'window'）.height；
const deviceWidth=Dimensions.get（'window'）.width；
类型Props={}；
导出默认类应用程序扩展组件{
render（）{
返回(
);
}
}
const styles=StyleSheet.create({
网络视图：{
弹性：1，
背景颜色：“黄色”，
宽度：设备宽度，
高度：设备高度
}
});

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

对齐：“中心”

是我的问题。我对其进行了评论，并立即加载了webView。 我在这里找到了解决方案：

---

“Brunocvchunha”的回答对我很有效。

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

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

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'}} 
    />

    );
  }
}

从“React”导入React；
从“react native”导入{WebView}；
导出默认类App扩展React.Component{
render（）{
返回(
);
}
}

不要在产生问题的视图中添加WebView组件，并且不会呈现WebView url，而是会显示视图样式。

WebView正在移动到

除此方法外，其他答案均无效：

npm安装--保存本地webview

然后按如下方式使用：

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

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

---

我正在做React Native Webview，您能建议我如何让Webview加载uri吗

render() {
        return (
            <Modal
                animationType="slide"
                ref={"webModal"}
                style={{
                    justifyContent: 'center',
                    borderRadius: Platform.OS === 'ios' ? 30 : 0,
                    width: screen.width,
                    height: screen.height,borderColor:'red',
                    borderWidth: 5
                }}
                position='center'
                backdrop={false}
                onClosed={() => {
                    // alert("Modal closed");
                }}>

                <View style={{ flexDirection: 'row', justifyContent: 'space-between', paddingHorizontal: 20, top: 10 }} >
                    <Text style={{ fontSize: 24, fontWeight: '700' }}>
                        Interests
                                 </Text>
                    <Icon name="ios-close" size={40} color='purple' onPress={() => { this.refs.webModal.close() }} />
                </View>
                <WebView
                    source={{ uri: this.state.link }}
                    style={{ marginTop: 20,borderColor:'green',
                    borderWidth: 5 }}
                />

            </Modal>
        );
    }
}

render（）{
返回(
{
//警报（“模态关闭”）；
}}>
兴趣
{this.refs.webModal.close（）}/>
);
}
}

从“react native”导入{WebView}已弃用

使用下线代替

npm安装反应本机渲染-html@4.1.2--保存

然后

从“react native render HTML”导入HTML

react native render html从版本4.2.0开始，react native webview现在是一个对等依赖项。因此，您需要自己安装。

自2020年6月起（注意日期，因为React Native answers似乎很快就过时了），最简单的解决方案似乎是：

从“React”导入React
从“react native”导入{视图，样式表}
从“react native WebView”导入{WebView}
导出常量组件WithWebView=（）=>{
返回(
)
}
const styles=StyleSheet.create({
视图：{
自我定位：“拉伸”，
弹性：1，
}
}

这