Bạn có thể sử dụng thành phần này để điều hướng qua lại trong lịch sử của chế độ xem web và định cấu hình các thuộc tính khác nhau cho nội dung web

Trên iOS, prop useWebKit có thể được sử dụng để chọn tham gia triển khai được hỗ trợ bởi WKWebView

Cảnh báo an ninh. Hiện tại, onMessage và

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

class MyInlineWeb extends Component {
  render() {
    return (
      <WebView
        originWhitelist={['*']}
        source={{html: '
Hello world
'}}
      />
    );
  }
}

0 không cho phép chỉ định nguồn gốc. Điều này có thể dẫn đến các cuộc tấn công kịch bản chéo trang nếu một tài liệu không mong muốn được tải trong một phiên bản WebView. Vui lòng tham khảo tài liệu MDN cho

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

class MyInlineWeb extends Component {
  render() {
    return (
      <WebView
        originWhitelist={['*']}
        source={{html: '
Hello world
'}}
      />
    );
  }
}

2 để biết thêm chi tiết về ý nghĩa bảo mật của điều này

---

Thẩm quyền giải quyết

đạo cụ

kế thừa

---

import React, {Component} from 'react';import {WebView} from 'react-native';class MyInlineWeb extends Component { render() { return ( Hello world

'}} /> ); }}3

Tải HTML tĩnh hoặc URI (có tiêu đề tùy chọn) trong WebView. Lưu ý rằng HTML tĩnh sẽ yêu cầu cài đặt thành

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

class MyInlineWeb extends Component {
  render() {
    return (
      <WebView
        originWhitelist={['*']}
        source={{html: '
Hello world
'}}
      />
    );
  }
}

5

Đối tượng được chuyển đến

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

class MyInlineWeb extends Component {
  render() {
    return (
      <WebView
        originWhitelist={['*']}
        source={{html: '
Hello world
'}}
      />
    );
  }
}

3 có thể có một trong các hình dạng sau

tải uri

• import React, {Component} from 'react';
  import {WebView} from 'react-native';
  
  class MyInlineWeb extends Component {
    render() {
      return (
        <WebView
          originWhitelist={['*']}
          source={{html: '
  Hello world
  '}}
        />
      );
    }
  }
  

  7 (chuỗi) - URI cần tải trong WebView. Có thể là một tệp cục bộ hoặc từ xa

• import React, {Component} from 'react';
  import {WebView} from 'react-native';
  
  class MyInlineWeb extends Component {
    render() {
      return (
        <WebView
          originWhitelist={['*']}
          source={{html: '
  Hello world
  '}}
        />
      );
    }
  }
  

  9 (chuỗi) - Phương thức HTTP để sử dụng. Mặc định là GET nếu không được chỉ định. Trên Android, các phương thức được hỗ trợ duy nhất là GET và POST

• static extraNativeComponentConfig()
  

  0 (đối tượng) - Các tiêu đề HTTP bổ sung để gửi cùng với yêu cầu. Trên Android, điều này chỉ có thể được sử dụng với các yêu cầu GET

• static extraNativeComponentConfig()
  

  1 (chuỗi) - Phần thân HTTP để gửi cùng với yêu cầu. Đây phải là một chuỗi UTF-8 hợp lệ và sẽ được gửi chính xác như đã chỉ định mà không cần mã hóa bổ sung (e. g. thoát URL hoặc base64) được áp dụng. Trên Android, điều này chỉ có thể được sử dụng với các yêu cầu POST

HTML tĩnh

• static extraNativeComponentConfig()
  

  2 (chuỗi) - Một trang HTML tĩnh để hiển thị trong WebView

• static extraNativeComponentConfig()
  

  3 (chuỗi) - URL cơ sở được sử dụng cho bất kỳ liên kết tương đối nào trong HTML

LoạiYêu cầuđối tượngKhông

---

static extraNativeComponentConfig()4

Kiểm soát xem có điều chỉnh phần chèn nội dung cho chế độ xem web được đặt phía sau thanh điều hướng, thanh tab hoặc thanh công cụ hay không. Giá trị mặc định là

static extraNativeComponentConfig()

5

TypeRequiredboolNo

---

static extraNativeComponentConfig()6

Hàm chấp nhận một chuỗi sẽ được chuyển đến WebView và được thực thi ngay lập tức dưới dạng JavaScript

LoạiChức năng bắt buộcKhông

---

static extraNativeComponentConfig()7

Đặt cài đặt này để cung cấp JavaScript sẽ được đưa vào trang web khi lượt xem tải

LoạiChuỗi yêu cầuKhông

---

static extraNativeComponentConfig()8

Boolean xác định xem âm thanh và video HTML5 có yêu cầu người dùng chạm vào chúng trước khi bắt đầu phát hay không. Giá trị mặc định là

static extraNativeComponentConfig()

5

TypeRequiredboolNo

---

goForward();0

Ghi đè thành phần gốc được sử dụng để hiển thị WebView. Bật một WebView gốc tùy chỉnh sử dụng cùng JavaScript với WebView gốc

Prop

goForward();

0 mong đợi một đối tượng có các khóa sau

• goForward();
  

  2 (bất kỳ)

• goForward();
  

  3 (đối tượng)

• goForward();
  

  4 (đối tượng)

LoạiYêu cầuđối tượngKhông

---

goForward();5

Chức năng được gọi khi tải WebView không thành công

LoạiChức năng bắt buộcKhông

---

goForward();7

Chức năng được gọi khi WebView tải xong

LoạiChức năng bắt buộcKhông

---

goForward();9

Hàm được gọi khi tải WebView thành công hoặc không thành công

LoạiChức năng bắt buộcKhông

---

goBack();

1

Chức năng được gọi khi WebView bắt đầu tải

LoạiChức năng bắt buộcKhông

---

onMessage

Một chức năng được gọi khi chế độ xem web gọi

goBack();

4. Việc đặt thuộc tính này sẽ đưa toàn cầu

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

class MyInlineWeb extends Component {
  render() {
    return (
      <WebView
        originWhitelist={['*']}
        source={{html: '
Hello world
'}}
      />
    );
  }
}

0 vào chế độ xem web của bạn, nhưng sẽ vẫn gọi các giá trị đã tồn tại trước đó là

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

class MyInlineWeb extends Component {
  render() {
    return (
      <WebView
        originWhitelist={['*']}
        source={{html: '
Hello world
'}}
      />
    );
  }
}

0

goBack();

4 chấp nhận một đối số,

goBack();

8, sẽ có sẵn trên đối tượng sự kiện,

goBack();

9.

goBack();

8 phải là một chuỗi

LoạiChức năng bắt buộcKhông

---

reload();

1

Chức năng được gọi khi quá trình tải WebView bắt đầu hoặc kết thúc

LoạiChức năng bắt buộcKhông

---

import React, {Component} from 'react';import {WebView} from 'react-native';class MyInlineWeb extends Component { render() { return ( Hello world

'}} /> ); }}4

Danh sách các chuỗi gốc để cho phép được điều hướng đến. Các chuỗi cho phép ký tự đại diện và chỉ khớp với nguồn gốc (không phải URL đầy đủ). Nếu người dùng nhấn để điều hướng đến một trang mới nhưng trang mới không có trong danh sách an toàn này, URL sẽ được hệ điều hành xử lý. Nguồn gốc được đưa vào danh sách an toàn mặc định là

reload();

4 và

reload();

5

LoạiYêu cầudàn chuỗiKhông

---

reload();

6

Hàm trả về chế độ xem để hiển thị nếu có lỗi

LoạiChức năng bắt buộcKhông

---

reload();

7

Hàm trả về chỉ báo tải. Chỗ dựa startInLoadingState phải được đặt thành true để sử dụng chỗ dựa này

LoạiChức năng bắt buộcKhông

---

reload();

8

Boolean kiểm soát xem nội dung web có được chia tỷ lệ để phù hợp với chế độ xem hay không và cho phép người dùng thay đổi tỷ lệ. Giá trị mặc định là

static extraNativeComponentConfig()

5

Trên iOS, khi , chỗ dựa này sẽ không hoạt động

TypeRequiredboolNo

---

stopLoading();1

Chức năng cho phép xử lý tùy chỉnh bất kỳ yêu cầu xem web nào. Trả về

static extraNativeComponentConfig()

5 từ chức năng để tiếp tục tải yêu cầu và

stopLoading();

3 để dừng tải

LoạiYêu cầuNền tảngchức năngNoiOS

---

stopLoading();4

Giá trị boolean buộc WebView hiển thị chế độ xem tải trong lần tải đầu tiên. Giá đỡ này phải được đặt thành

static extraNativeComponentConfig()

5 để giá đỡ

reload();

7 hoạt động

TypeRequiredboolNo

---

stopLoading();8

Số dấu phẩy động xác định tốc độ giảm tốc của chế độ xem cuộn sau khi người dùng nhấc ngón tay lên. Bạn cũng có thể sử dụng các phím tắt chuỗi

stopLoading();

9 và WebView0 phù hợp với cài đặt iOS cơ bản cho WebView1 và WebView2 tương ứng

• thông thường. 0. 998
• Nhanh. 0. 99 (mặc định cho chế độ xem web trên iOS)

LoạiBắt buộcNền tảngsốNoiOS

---

WebView3

Giá trị Boolean để kiểm soát xem Bộ lưu trữ DOM có được bật hay không. Chỉ được sử dụng trong Android

TypeBắt buộcPlatformboolNoAndroid

---

WebView4

Giá trị Boolean để kích hoạt JavaScript trong WebView. Chỉ được sử dụng trên Android vì JavaScript được bật theo mặc định trên iOS. Giá trị mặc định là

static extraNativeComponentConfig()

5

TypeBắt buộcPlatformboolNoAndroid

---

WebView7

Chỉ định chế độ nội dung hỗn hợp. tôi. e WebView sẽ cho phép nguồn gốc an toàn tải nội dung từ bất kỳ nguồn gốc nào khác

Các giá trị có thể có của WebView7 là

• WebView9 (mặc định) - WebView sẽ không cho phép nguồn gốc an toàn tải nội dung từ nguồn gốc không an toàn
• useWebKit0 - WebView sẽ cho phép nguồn gốc an toàn tải nội dung từ bất kỳ nguồn gốc nào khác, ngay cả khi nguồn gốc đó không an toàn
• useWebKit1 - WebView sẽ cố gắng tương thích với cách tiếp cận của trình duyệt web hiện đại liên quan đến nội dung hỗn hợp

LoạiBắt buộcPlatformstringKhông cóAndroid

---

useWebKit2

Giá trị Boolean để bật cookie của bên thứ ba trong WebView. Chỉ được sử dụng trên Android Lollipop trở lên vì cookie của bên thứ ba được bật theo mặc định trên Android Kitkat trở xuống và trên iOS. Giá trị mặc định là

static extraNativeComponentConfig()

5

TypeBắt buộcPlatformboolNoAndroid

---

useWebKit5

Đặt tác nhân người dùng cho WebView

LoạiBắt buộcPlatformstringKhông cóAndroid

---

useWebKit7

Boolean xác định xem video HTML5 phát nội tuyến hay sử dụng bộ điều khiển toàn màn hình gốc. Giá trị mặc định là

stopLoading();

3

GHI CHÚ

Để video phát nội tuyến, không chỉ thuộc tính này cần được đặt thành

static extraNativeComponentConfig()

5 mà phần tử video trong tài liệu HTML cũng phải bao gồm thuộc tính onMessage0

LoạiBắt buộcPlatformboolNoiOS

---

onMessage1

Giá trị boolean xác định xem liệu chế độ xem web có bị trả lại khi đến mép nội dung hay không. Giá trị mặc định là

static extraNativeComponentConfig()

5

LoạiBắt buộcPlatformboolNoiOS

---

onMessage3

Số lượng nội dung của chế độ xem web được chèn vào từ các cạnh của chế độ xem cuộn. Mặc định là {top. 0, trái. 0, đáy. 0, phải. 0}

TypeRequiredPlatformobject. {đứng đầu. số, trái. số, đáy. số, phải. số}NoiOS

---

onMessage4

Xác định loại dữ liệu được chuyển đổi thành URL có thể nhấp trong nội dung của chế độ xem web. Theo mặc định, chỉ số điện thoại được phát hiện

Bạn có thể cung cấp một loại hoặc một mảng nhiều loại

Các giá trị có thể có của onMessage4 là

• onMessage6
• onMessage7
• onMessage8
• onMessage9

• import React, {Component} from 'react';
  import {WebView} from 'react-native';
  
  class MyInlineWeb extends Component {
    render() {
      return (
        <WebView
          originWhitelist={['*']}
          source={{html: '
  Hello world
  '}}
        />
      );
    }
  }
  

  00

• import React, {Component} from 'react';
  import {WebView} from 'react-native';
  
  class MyInlineWeb extends Component {
    render() {
      return (
        <WebView
          originWhitelist={['*']}
          source={{html: '
  Hello world
  '}}
        />
      );
    }
  }
  

  01

Với việc thực hiện, chúng tôi có ba giá trị mới

• import React, {Component} from 'react';
  import {WebView} from 'react-native';
  
  class MyInlineWeb extends Component {
    render() {
      return (
        <WebView
          originWhitelist={['*']}
          source={{html: '
  Hello world
  '}}
        />
      );
    }
  }
  

  02

• import React, {Component} from 'react';
  import {WebView} from 'react-native';
  
  class MyInlineWeb extends Component {
    render() {
      return (
        <WebView
          originWhitelist={['*']}
          source={{html: '
  Hello world
  '}}
        />
      );
    }
  }
  

  03

• import React, {Component} from 'react';
  import {WebView} from 'react-native';
  
  class MyInlineWeb extends Component {
    render() {
      return (
        <WebView
          originWhitelist={['*']}
          source={{html: '
  Hello world
  '}}
        />
      );
    }
  }
  

  04

TypeRequiredPlatformstring hoặc arrayNoiOS

---

import React, {Component} from 'react';import {WebView} from 'react-native';class MyInlineWeb extends Component { render() { return ( Hello world

'}} /> ); }}05

Giá trị boolean xác định xem tính năng cuộn có được bật trong WebView hay không. Giá trị mặc định là

static extraNativeComponentConfig()

5

LoạiBắt buộcPlatformboolNoiOS

---

import React, {Component} from 'react';import {WebView} from 'react-native';class MyInlineWeb extends Component { render() { return ( Hello world

'}} /> ); }}08

Đặt xem có bật Định vị địa lý trong WebView. Giá trị mặc định là

stopLoading();

3. Chỉ được sử dụng trong Android

TypeBắt buộcPlatformboolNoAndroid

---

import React, {Component} from 'react';import {WebView} from 'react-native';class MyInlineWeb extends Component { render() { return ( Hello world

'}} /> ); }}11

Boolean đặt xem JavaScript chạy trong ngữ cảnh của URL lược đồ tệp có được phép truy cập nội dung từ bất kỳ nguồn nào hay không. Bao gồm truy cập nội dung từ các URL lược đồ tệp khác. Giá trị mặc định là

stopLoading();

3

TypeBắt buộcPlatformboolNoAndroid

---

import React, {Component} from 'react';import {WebView} from 'react-native';class MyInlineWeb extends Component { render() { return ( Hello world

'}} /> ); }}13

Boolean đặt xem WebView có quyền truy cập vào hệ thống tệp hay không. Giá trị mặc định là

stopLoading();

3

Bạn có thể kết xuất HTML trong React Native không?

Làm cách nào để sử dụng iframe trong React Native WebView?

Làm cách nào để chuyển đổi HTML sang React Native?