React Native WebView无法加载动态URL内容问题求助

你当前的代码存在几个可直接导致加载失败的问题，按如下步骤修正即可：

• URI地址缺少协议头：WebView无法识别不带HTTP/HTTPS前缀的地址，需要给www.amazon.com加上https://前缀
• 未给WebView设置明确尺寸：WebView无默认宽高，未设置样式时即使加载成功也无法在页面显示
• 包名导入大小写错误：官方react-native-webview包名全小写，大小写错误会导致组件导入失败

修复后的完整代码如下：

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

export default class App extends Component {
  render() {
    return (
      <WebView
        style={styles.webview}
        source={{uri: 'https://www.amazon.com'}}
      />
    );
  }
}

const styles = StyleSheet.create({
  webview: {
    flex: 1
  }
});

如果是Android平台需要加载HTTP协议的地址，还需要额外配置明文流量权限：

打开android/app/src/main/AndroidManifest.xml，在标签中添加属性：android:usesCleartextTraffic="true"

如果还未安装依赖，先执行对应安装命令：

• npm安装：npm install react-native-webview --save
• iOS原生依赖安装：cd ios && pod install

内容的提问来源于stack exchange，提问作者harsha vardan