Tiêm javascript WebView React-native

Webview là một trình duyệt nhúng có thể được sử dụng để hiển thị các trang web bên trong ứng dụng React Native của bạn. Nó có thể hiển thị mọi thứ bắt đầu từ các phần tử HTML tùy chỉnh cho đến toàn bộ ứng dụng web bên trong React Native

Trong React Native, chúng ta có thể sử dụng Webview bằng cách sử dụng gói của bên thứ ba có tên là Reac-native-webview. Đây là triển khai chính thức của chế độ xem web sau khi nó bị xóa khỏi lõi gốc React để giữ cho lõi gọn gàng nhất có thể

Trong bài đăng này, chúng tôi sẽ triển khai một dự án đơn giản để xem cách làm việc với Webview trên React Native và một số trường hợp sử dụng tốt mà nó phục vụ là gì

Tạo một dự án React Native

Để bắt đầu, chúng ta cần bắt đầu một dự án mới với React Native CLI. Bạn có thể làm điều này với expo nếu bạn không muốn trải qua quá trình cài đặt tẻ nhạt

npx react-native init ExperimentingWithWebview

Với hội chợ triển lãm

Nếu bạn đang sử dụng Expo, bạn có thể chuyển thẳng sang Triển khai WebView cơ bản sau phần này

expo install react-native-webview

Thêm phụ thuộc

// For npm users
npm install react-native-webview

// If you're using yarn

yarn add react-native-webview

Liên kết phụ thuộc bản địa

Bạn sẽ chỉ cần điều này nếu bạn không sử dụng Expo và sử dụng React Native CLI để bắt đầu dự án của mình

Nếu bạn đang sử dụng

expo install react-native-webview

8 ≥ 0. 60 tự động liên kết sẽ đảm nhận bước này nên bạn có thể bỏ qua, nhưng đừng quên chạy

expo install react-native-webview

9

react-native link react-native-webview

Nếu bạn từng gỡ cài đặt gói này,

react-native unlink react-native-webview

Đối với iOS và macOS

Nếu sử dụng cacaopods, hãy chạy trong thư mục

// For npm users
npm install react-native-webview

0 hoặc

// For npm users
npm install react-native-webview

1,

expo install react-native-webview

0

cho Android

Nếu bạn đang sử dụng Reac-native-webview < 6. Thoải mái bỏ qua

Nếu bạn đang sử dụng Reac-igen-webview ≥ 6. x. x

Đảm bảo AndroidX được bật trong dự án của bạn bằng cách chỉnh sửa

// For npm users
npm install react-native-webview

2

expo install react-native-webview

2

Rất có thể điều này đã được React Native CLI tự động thực hiện

Triển khai một WebView cơ bản

Đã đến lúc loại bỏ mã soạn sẵn bên trong

// For npm users
npm install react-native-webview

3 và viết mã của chúng tôi cho chế độ xem web

expo install react-native-webview

4

Đây là tất cả những gì bạn cần làm để hiển thị một trang web trong ứng dụng của bạn

// For npm users
npm install react-native-webview

4 chỗ dựa

Đây là danh sách các chuỗi gốc mà bạn được phép điều hướng bên trong thành phần webview. Phải mất một mảng các chuỗi. Theo mặc định, các giá trị của nó là,

// For npm users
npm install react-native-webview

5 và

// For npm users
npm install react-native-webview

6. Nếu người dùng điều hướng đến một trang mới không có nguồn gốc trong danh sách cho phép, URL sẽ được hệ điều hành xử lý

expo install react-native-webview

8

Đang tải các tệp HTML cục bộ/nội tuyến

Bạn cũng có thể tải các tệp HTML cục bộ hoặc nội tuyến vào một Webview và đây là cách bạn có thể đạt được điều đó

expo install react-native-webview

0

Hoặc thêm một số HTML nội tuyến

expo install react-native-webview

1

Tiêm javascript tùy chỉnh vào chế độ xem web

Bạn cũng có thể thêm javascript của riêng mình có thể chạy bên trong chế độ xem web. Bạn có thể sử dụng nó để thao tác hành vi của trang web bạn đang tải theo nhu cầu của bạn

Có hai cách để làm điều này

1. // For npm users
   npm install react-native-webview

   7 chống đỡ
2. phương pháp

   // For npm users
   npm install react-native-webview

   8

Tên của chúng có thể gây nhầm lẫn vì vậy hãy hiểu chúng dựa trên mục đích của chúng, bạn sẽ rõ trong một vài ví dụ

// For npm users
npm install react-native-webview

7 chống đỡ

Đây là chỗ dựa cho thành phần Webview chứa các tập lệnh sẽ chạy khi trang web tải lần đầu tiên. Nó chỉ chạy một lần, ngay cả khi trang web được tải lại hoặc điều hướng đi

Ví dụ

expo install react-native-webview

2

phương pháp

// For npm users
npm install react-native-webview

8

Như chúng ta đã biết, prop

// For npm users
npm install react-native-webview

7 mà chúng ta đã thảo luận ở trên chỉ hoạt động trong lần tải đầu tiên và không có cách nào khác nếu chúng ta muốn chạy tập lệnh nhiều lần hoặc điều hướng trang. Đó là lý do tại sao, Webview hiển thị phương pháp này

// For npm users
npm install react-native-webview

8 trên tài liệu tham khảo của nó

Ví dụ

expo install react-native-webview

3

Mặc dù tất cả những cách này có thể giúp bạn điều khiển chế độ xem web theo nhu cầu của mình, nhưng một yêu cầu nữa của bạn có thể là gửi hoặc nhận dữ liệu từ trang web bên trong WebView. Vì vậy, bây giờ chúng ta sẽ thảo luận về cách bạn có thể giao tiếp giữa ứng dụng JS và React Native của mình

Giao tiếp giữa JS và React Native

Điều này đòi hỏi phải sử dụng hai thứ

1. chức năng

   // If you're using yarn
   
   yarn add react-native-webview

   3

2. // If you're using yarn
   
   yarn add react-native-webview

   4 chỗ dựa

// If you're using yarn

yarn add react-native-webview

3 là một chức năng tiếp xúc với các tập lệnh được đưa vào bên trong WebView. Về cơ bản, bạn có thể chuyển bất cứ thứ gì cho nó, miễn là chúng được đánh số thứ tự đúng cách. Nó sẽ rõ ràng trong ví dụ dưới đây

Ngoài ra, bất cứ điều gì bạn chuyển vào bên trong

// If you're using yarn

yarn add react-native-webview

6 đều có thể được truy cập trong React Native thông qua lệnh gọi lại được chuyển vào

// If you're using yarn

yarn add react-native-webview

4 prop.

// If you're using yarn

yarn add react-native-webview

4 là chỗ dựa cho Webview nhận lệnh gọi lại và được kích hoạt bất cứ khi nào một tin nhắn được gửi bằng cách sử dụng

// If you're using yarn

yarn add react-native-webview

6

Ví dụ

expo install react-native-webview

4

Điều này chỉ ghi lại màu nền của trang web bất cứ khi nào nó thay đổi. Như bạn có thể thấy, chúng tôi đang chuyển cuộc gọi lại bên trong prop34 prop được kích hoạt trên

// If you're using yarn

yarn add react-native-webview

6

Đối tượng sự kiện thực tế được truyền bên trong cuộc gọi lại

// If you're using yarn

yarn add react-native-webview

4 là cái này,

react-native link react-native-webview

3 là đối số mà chúng ta đã truyền bên trong

// If you're using yarn

yarn add react-native-webview

3

expo install react-native-webview

5

Xử lý các thay đổi trạng thái điều hướng

Bây giờ chúng ta sẽ thảo luận về cách bạn có thể chặn bất cứ khi nào người dùng điều hướng bên trong chế độ xem web đến một trang web khác hoặc nhấp vào bất kỳ liên kết nào. Bạn có thể đặt một cuộc gọi lại sẽ xảy ra bất cứ khi nào tuyến đường thay đổi

react-native link react-native-webview

5 chỗ dựa

Điều này có một cuộc gọi lại được kích hoạt bất cứ khi nào người dùng điều hướng bên trong chế độ xem web. Nó chuyển trạng thái điều hướng hiện tại dưới dạng đối số có thể được truy cập bên trong cuộc gọi lại

Ví dụ

expo install react-native-webview

6

Cấu trúc tham số

react-native link react-native-webview

6 cơ bản được truyền vào

react-native link react-native-webview

7

expo install react-native-webview

7

Cũng giống như một dự án thú vị, bạn có thể trải nghiệm với WebView và sử dụng nhiều phương thức có sẵn của nó, chẳng hạn như

react-native link react-native-webview

8 và

react-native link react-native-webview

9,

react-native unlink react-native-webview

0 [hoặc thậm chí thêm hỗ trợ thanh toán của apple] để tái tạo cảm giác giống như trình duyệt cho người dùng của bạn, giống như chúng tôi đã sử dụng phương pháp

// For npm users
npm install react-native-webview

8

Người giới thiệu

Bạn có thể tham khảo tài liệu React Native WebView để có cái nhìn tổng quan về tất cả những gì nó cung cấp hoặc trang tham chiếu để xem tất cả các đạo cụ và phương thức có sẵn. Nếu bạn không thích dự án trên, bạn có thể xem qua blog hướng dẫn này nếu bạn gặp khó khăn