React Native react-native-webview 跨平台WebView库

RN 项目 安装 react-native-webview 跨平台webview库

# 安装 react-native-webview
yarn add yarn add react-native-webview

// package.json
{
  "name": "RNMyBaby",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@ant-design/react-native": "^3.1.11",
    "mockjs": "^1.0.1-beta3",
    "react": "16.8.6",
    "react-native": "0.60.4",
    "react-native-gesture-handler": "^1.3.0",
    "react-native-splash-screen": "^3.2.0",
    "react-native-vector-icons": "^6.6.0",
    "react-native-video": "^5.0.0",
    "react-native-webview": "^5.12.1",
    "react-navigation": "^3.11.1"
  },
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/runtime": "^7.5.5",
    "@react-native-community/eslint-config": "^0.0.5",
    "babel-jest": "^24.8.0",
    "babel-plugin-import": "^1.12.0",
    "eslint": "^6.1.0",
    "jest": "^24.8.0",
    "metro-react-native-babel-preset": "^0.55.0",
    "react-test-renderer": "16.8.6"
  },
  "jest": {
    "preset": "react-native"
  }
}

1. 使用：import { WebView } from “react-native-webview” 引入 react-native-webview
2. 配置：source={{ uri: URL地址 }} 即可使用

/**
 * @Author: brady
 * @Date: 2019-07-31
 * @Last Created time: 20:24:26
 * @Description:
 */
import React, { Component } from "react";
import { StyleSheet, View, Text, Dimensions } from "react-native";
import { WebView } from "react-native-webview";

// Dimensions 用于获取设备宽、高、分辨率
const { width, height } = Dimensions.get("window");

type Props = {};
export default class Record extends Component<Props> {
  // 默认属性
  static defaultProps = {};

  // 属性类型
  static propTypes = {};

  // 构造
  constructor(props) {
    super(props);
    // 初始状态
    this.state = {};
  }

  // 渲染
  render() {
    return (
      <View style={styles.container}>
        <WebView
          style={{ width: width, height: height }}
          source={{ uri: "https://reactnative.cn/" }}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  }
});

具体效果如下：