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

时间：2016-02-17 08:12:34

标签： react-native

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

以下是输出的屏幕截图。 image

15 个答案:

答案 0 :(得分：35)

我有这个问题。当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
  }
});

答案 1 :(得分：12)

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

答案 2 :(得分：7)

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

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

答案 3 :(得分：4)

如果您希望组件呈现整个页面，则需要使用包含flex: 1的View对其进行包装。以下代码适用于我：

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

答案 4 :(得分：4)

package.json

和样式如下：

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

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

答案 5 :(得分：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
  }
});

答案 6 :(得分：2)

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

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

答案 7 :(得分：1)

让我给出一个可以无缝运行的最简单的示例：

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，而是显示视图样式。

答案 8 :(得分：1)

我认为您必须删除此内容：

<View style={styles.container}>
</view>

答案 9 :(得分：1)

WebView被移至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>

然后按以下方式使用它：

Jekyll::Hooks.register :site, :post_write do |site|
  if site.config['create_index']
    system('npm run index')
  end
end

答案 10 :(得分：1)

截至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扩展到所需的空间。我发现最简单的方法是，只应用flex: 1的{​​{1}}和alignSelf: 'stretch'来填充所需的空间，然后View来自动跟随。

希望这可以在过时之前帮助别人！

答案 11 :(得分：0)

我遇到了同样的问题，花了一天时间试图修复它。我复制了UIExplorer webview示例，但是没有用。

我最终最终升级了反应并创建了一个新的react-native项目并将文件复制到那里，并修复了它。

我希望我能更好地回答为什么修复它，但希望有帮助

答案 12 :(得分：0)

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

  

对齐方式：“居中”

为我造成了问题。我对此发表了评论，并立即加载了webView。 我在这里找到解决方案： https://github.com/facebook/react-native/issues/5974 “ brunocvcunha”的回复对我有用。

答案 13 :(得分：0)

我正在做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>
        );
    }
}

答案 14 :(得分：0)

从'react-native'导入{WebView}; 已弃用

在行下方使用

npm install react-native-render-html@4.1.2 --save

然后

从“ react-native-render-html”导入HTML；

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

相关问题
最新问题