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

淡淡的烟草味﹌ 2021-11-11 07:12 375阅读 0赞

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

具体效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70]: /images/20211109/8fad928e5ebe474cb9a34af3f3dd67b7.png