react-native - React Native Webview 未加载任何 url(React Native Web View 不起作用)

Question

我正在尝试在我的应用程序中实现 React Native WebView 组件，但是 Web View 没有加载任何 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 组件上设置宽度属性来解决。

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