Trước tiên, hãy khởi tạo dự án của chúng ta! Chuyển đến thư mục mà bạn muốn lưu trữ dự án của mình. Trong thư mục này, hãy chạy để khởi tạo dự án Expo. Bạn có thể thay thế “my-project” bằng bất kỳ tên nào bạn thích.expo init my-project

Sau đó, thay đổi thư mục mới được tạo bằng và chạy để khởi động máy chủ phát triển. Expo cho phép bạn quyết định loại thiết bị nào bạn muốn làm việc cùng; thiết bị tôi đã sử dụng trong bản demo và video ở trên là iPhone 12 Pro Max đã cài đặt phiên bản iOS 14.5.cd my-projectexpo start

Nhưng trước khi bắt đầu ứng dụng của mình, chúng ta vẫn cần cài đặt gói React Native WebView . Để làm điều đó, hãy chạy lệnh sau trong thư mục dự án của bạn:

expo cài đặt phản ứng - bản địa - webview

Gói này sẽ hoạt động trên cả thiết bị Android và iOS.

Dưới đây là tổng quan ngắn về các lệnh đầu cuối:

# cd vào thư mục chứa dự án của bạn 
 $ cd dir 

# khởi tạo dự án expo 
$ expo init my - project 

# điều hướng bên trong dự án mới tạo 
$ cd my - project 

# cài đặt gói webview 
$ expo cài đặt react - native - webview 

# chạy máy chủ phát triển 
$ expo start

Tạo cấu trúc URL cơ bản

Để đơn giản, chúng tôi sẽ thêm mã của mình vào tệp và chúng tôi sẽ không tạo thêm bất kỳ tệp nào.App.js

Cách đơn giản nhất để nhúng một WebView vào ứng dụng React Native của bạn là cung cấp một URL làm nguồn cho thành phần WebView của bạn:

# Ứng dụng . js
 nhập Phản ứng , { Thành phần } từ 'phản ứng' ; nhập { SafeAreaView } từ "reac-native" ; nhập { WebView } từ 'Reac-igen-webview' ; class MyWeb mở rộng Thành phần { 
  render () { return ( < SafeAreaView style = {{ flex : 1 }}> < Nguồn WebView       
     
     

     
     
          
         
          = {{ uri : ' https: // Reacnative.dev /' }} /> </ SafeAreaView > ); } }

Để sử dụng một thành phần WebView, bạn phải nhập nó, như chúng tôi đã làm ở dòng 4. Sau đó, tất cả những gì bạn cần làm là thiết lập các sourceđạo cụ!

Xin lưu ý rằng sourcelấy một đối tượng làm giá trị. Trong trường hợp này, chúng tôi đang cung cấp URI:

nguồn ={{ uri : 'https://reactnative.dev/' }}

Mã này sẽ dẫn đến một cái gì đó như thế này:

Cấu trúc URL cơ bản của chúng tôi đã được tạo

Viết HTML nội tuyến cơ bản

Một cách phổ biến khác để cung cấp cho WebView của bạn một nguồn là viết một số mã HTML nội tuyến. Hãy bắt đầu với một ví dụ rất đơn giản ở đây:

# App.js

class MyWeb extends Component {
  render() {
    const customHTML = `
      <body style="display:flex; flex-direction: column;justify-content: center; 
        align-items:center; background-color: black; color:white; height: 100%;">
          <h1 style="font-size:100px; padding: 50px; text-align: center;" 
          id="h1_element">
            This is simple html
          </h1>
          <h2 style="display: block; font-size:80px; padding: 50px; 
          text-align: center;" id="h2_element">
            This text will be changed later!
          </h2>
       </body>`;

    return (
      <SafeAreaView style={{ flex: 1 }}>
        <WebView 
          source={{ html: customHTML }} 
        />
      </SafeAreaView>
    );
  }
}

React Native WebView: Hướng dẫn chi tiết để bắt đầu

Tạo cấu trúc URL cơ bản

Viết HTML nội tuyến cơ bản

Tin tức cùng chủ đề