Hướng dẫn tạo React Native Webview trong Android

Khi bạn muốn đưa giao diện một website nào đó lên Android, thay vì lỉnh kỉnh đi mở trình duyệt và mất thời gian đi gõ đường dẫn website ấy, có một cách dễ hơn rất nhiều, đó là bạn có thể dùng đến webviews. Vậy Webview trong Android là gì? Làm thế nào để tạo lập và sử dụng React Native Webview?

Gói gọn trải nghiệm trên Android với React Native Webview

Định nghĩa về webview?

Webview trong Android là một view giúp ứng dụng mở một trang web từ URL hoặc một trang HTML ngay bên trong ứng dụng mà không cần rời khỏi ứng dụng ấy.

Để dùng được webview tùy chỉnh này( sau khi thông tin được render dưới dạng form HTML) bạn phải dùng đến framework React Native Android. Vậy làm cách nào để cài đặt và sử dụng.

Các bước lập trình Webview trong Android từ React Native

Bước 1: Cài đặt nền tảng :
npm install react-native-webview-android –save


Bước 2: Thêm nó vào dự án ứng dụng đang triển khai

Cài đặt  trong  android/setting.gradle

...

include ':RNWebView', ':app'

project(':RNWebView').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webview-android/android')

Cài đặt  trong android/app/build.gradle

...

dependencies {

  ...

  compile project(':RNWebView')

}

Bước 3: Đăng ký Module-RN>= 0.29( trong MainApplication.java)

import com.burnweb.rnwebview.RNWebViewPackage;  // <--- import 

public class MainApplication extends Application implements ReactApplication {

  ......

  @Override

  protected List<ReactPackage> getPackages() {

    return Arrays.<ReactPackage>asList(

        new MainReactPackage(),

        new RNWebViewPackage()); // <------ add this line to your MainApplication class 

  }

  ......

}

Bước 4: Kết thúc và khởi chạy dụng để kiểm tra


Những chú ý khi lập trình React Native webview


Kết quả của onShouldStartLoadWithRequest:

React Native webview được thực hiện dựa trên nền tảng mã onShouldStartLoadWithRequest, trong đó, kết quả được trả về chỉ bao gồm “url” và “navigationState”

Chú ý về file HTML khi upload

React Native Webview sẽ quản lý và chỉ hỗ trợ upload tất cả file input bằng định dạng HTML. Module này yêu cầu hệ điều hành Android của bạn phải từ 4.1 trở lên, tuy nhiên, một vài đối với một vài thiết bị có cấu tạo không phù hợp, nó sẽ không thể triển khai như bình thường

Đối với HTML5 videoplayer bạn mong muốn khởi chạy trong webview, bạn nên có thêm một bước cài đặt nữa trong Android như sau:

“hardwareAccelerated="true" in your AndroidManifest.xml file”


Kết, với những thông tin trên, hi vọng rằng bạn đã có thể tự tạo thành công cho ứng dụng của mình một React Native Webview hiệu quả, gia tăng trải nghiệm khi sử dụng.