React Native应用程序中的WebView

最新推荐文章于 2024-08-10 07:56:27 发布

cumubi7552

最新推荐文章于 2024-08-10 07:56:27 发布

阅读量621

点赞数

原文链接：https://www.includehelp.com/react-js/webview-in-react-native-applications.aspx

版权

As the name implies, the WebView is a component that displays web content in a native view.

顾名思义，WebView是在本机视图中显示Web内容的组件。

For example, an application that is customized to open google.com whenever it is launched.

例如，一个自定义为在启动时打开google.com的应用程序。

The WebView component existed since but was recently changed to React Native WebView.

此后一直存在WebView组件，但最近已更改为React Native WebView 。

Let's get started with installation,

让我们开始安装

Open your command prompt window in your app directory and execute this command,

在应用目录中打开命令提示符窗口，然后执行以下命令，

    npm install --save react-native-webview

Wait for a while until the installation is complete.

等待一段时间，直到安装完成。

Ride on and open your React Native app folder.

骑上并打开您的React Native应用程序文件夹。

Section A: Displaying A Web Link (Uri)

A部分：显示Web链接(Uri)

Open App.js and type the following,

打开App.js并输入以下内容，

import * as React from 'react';
import {useState} from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { WebView } from 'react-native-webview';


export default class App extends React.Component {
  render () {
  return (
    <View style={styles.container} >

  <WebView source={{ uri: 'https://go237.com' }} />

    </View>
  );
}
}
const styles = StyleSheet.create ({
container : {
    flex : 1
  }
});

Output

输出量

As you can see from the code above, we always begin by importing the component from react-native.

从上面的代码中可以看到，我们始终从从react-native 导入组件开始。

The Web View component takes the source attribute which is simply the web link you wish to access from your app.

Web View组件采用source属性，该属性只是您希望从应用程序访问的Web链接。

Section B: Displaying Inline HTML

B部分：显示内联HTML

In this section, we will display HTML codes from within of react native application.

在本节中，我们将在react native应用程序中显示HTML代码。

At this point, the source attribute will take the inline HTML value and that's where all the HTML tags will be typed.

此时，source属性将采用内联HTML值，这就是所有HTML标记都将被键入的位置。

To use the HTML web view, you must include the attribute: originWhitelist={['*']}

要使用HTML Web视图，必须包含以下属性： originWhitelist = {['*']}

Below is an example of a short story in HTML.

以下是HTML中的一个简短故事的示例。

import * as React from 'react';
import { useState } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { WebView } from 'react-native-webview';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <WebView
        
  source={{ html: '<h1><center>I recently lost the love of my life to divorce. It has nearly devastated me. I also have many friends experiencing the same pain. I dont write much, but at 2 am, I started thinking of all the things that I could say to comfort my friends. As I was writing, I began to comfort myself also by including the things that I had read and heard about how God would want me to feel and think. The only thing that has kept me going is knowing that Jesus has a better plan for me. <br/>Shalom</center></h1>' 
          }}
          originWhitelist={['*']}
        />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding : 50,
  },
});

Output

输出量