React Native应用程序中的WebView

朴灿烈づ我的快乐病毒、 2023-03-05 13:28 223阅读 0赞

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

![React Native | WebView][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并输入以下内容，**

**Output**

**输出量**

![React Native | WebView Component][React Native _ WebView Component]

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**

**输出量**

![React Native | WebView Component][React Native _ WebView Component 1]

Thanks for coding with me! See you @ the next article. Feel free to drop a comment or question. God Bless You!

感谢您与我编码！ 下次见。 随意发表评论或问题。 上帝祝福你！

> 翻译自: [https://www.includehelp.com/react-js/webview-in-react-native-applications.aspx][https_www.includehelp.com_react-js_webview-in-react-native-applications.aspx]

[React Native _ WebView]: https://www.includehelp.com/react-js/Images/webview-in-react-native-1.jpg
[React Native _ WebView Component]: /images/20230208/fa17b6694b164b65a6d6c66ba44c7e96.png
[React Native _ WebView Component 1]: https://www.includehelp.com/react-js/Images/webview-in-react-native-3.jpg
[https_www.includehelp.com_react-js_webview-in-react-native-applications.aspx]: https://www.includehelp.com/react-js/webview-in-react-native-applications.aspx