Trong React Native, WebViews cho phép truy cập vào bất kỳ cổng web nào trong chính ứng dụng dành cho thiết bị di động. Nói cách khác, chế độ xem web cho phép chúng tôi mở các URL web bên trong giao diện ứng dụng. Mặc dù React Native cung cấp cho chúng ta thành phần xem web được tích hợp sẵn, nhưng chúng ta sẽ sử dụng plugin react-native-webview trong hướng dẫn này, vì nó mạnh hơn. React Native WebView là một WebView hiện đại, được hỗ trợ tốt và đa nền tảng cho React Native.
Webview tích hợp sẵn từ React Native sẽ sớm không được dùng nữa dựa trên tài liệu này . Do đó, plugin này đóng vai trò thay thế cho chế độ xem web tích hợp sẵn. Plugin này là một plugin của bên thứ ba được hỗ trợ bởi cộng đồng react-native. Yêu cầuCác yêu cầu để làm theo hướng dẫn này là: - Nodejs
>=8.x.x với npm hoặc sợi được cài đặt làm trình quản lý gói. - watchman một dịch vụ xem tập tin.
- react-native-cli .
Bắt đầu với React Native WebViewĐể bắt đầu với cấu hình chế độ xem web, trước tiên chúng ta cần cài đặt plugin thực tế. Ở đây, chúng tôi đang sử dụng sợi để cài đặt plugin nhưng chúng tôi cũng có thể sử dụng NPM (Trình quản lý gói nút). Do đó, để cài đặt plugin, chúng ta cần chạy lệnh sau trong dấu nhắc lệnh của thư mục dự án của chúng ta: - sợi thêm react-native-webview
Nếu phiên bản gốc phản ứng bằng hoặc lớn hơn 0,60 thì quá
trình cài đặt cũng sẽ tự động liên kết plugin với các cấu hình gốc. Tuy nhiên, trong trường hợp của các phiên bản trước đó, chúng tôi có thể cần phải chạy: - react-native link react-native-webview
iOSTrong trường hợp của iOS, chúng ta cũng cần chạy lệnh sau: - cài đặt pod
AndroidTrong trường hợp của Android, mô-đun này không yêu cầu thêm bất kỳ bước nào sau khi chạy lệnh liên kết. Nhưng đối với phiên
bản react-native-webview> = 6.XX, chúng tôi cần đảm bảo AndroidX được bật trong dự án của chúng tôi. Điều này có thể được thực hiện bằng cách chỉnh sửa android/gradle.properties và thêm các dòng sau: - android.useAndroidX = true
- android.enableJetifier = true
Điều này hoàn thành các bước cài đặt của chúng tôi. Bây giờ chúng tôi có thể sử dụng plugin trong dự án gốc phản ứng của chúng tôi. Tải HTML nội tuyến bằng React Native
WebViewĐầu tiên, chúng tôi sẽ tải một nội dung HTML đơn giản vào giao diện ứng dụng của chúng tôi. Để làm được điều đó, chúng tôi cần thêm các lần nhập sau vào tệp App.js của chúng tôi : import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
Ở đây, chúng tôi đã nhập WebView thành phần từ plugin react-native-webview . Bây giờ, chúng ta có thể sử dụng thành phần này để tải nội dung HTML như được hiển thị trong đoạn mã bên dưới: import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
class MyInlineWeb extends Component {
render() {
return (
<WebView
originWhitelist={['*']}
source={{ html: '<h2>This is a static HTML source!</h2>' }}
/>
);
}
}
Ở đây, chúng ta đã xác định MyInlineWeb thành phần lớp. Thành phần lớp này có một render() chức
năng hiển thị import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
class MyInlineWeb extends Component {
render() {
return (
<WebView
originWhitelist={['*']}
source={{ html: '<h2>This is a static HTML source!</h2>' }}
/>
);
}
} 0thành phần. Thành WebView phần có nội dung HTML được định cấu hình để import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
class MyInlineWeb extends Component {
render() {
return (
<WebView
originWhitelist={['*']}
source={{ html: '<h2>This is a static HTML source!</h2>' }}
/>
);
}
} 2hỗ trợ nó . Do đó, chúng ta có thể thấy nội dung HTML được hiển thị trong giao diện ứng dụng như được hiển thị trong ảnh chụp màn hình trình giả lập bên dưới:Đang tải URL từ xaBây giờ, thay vì nội dung HTML đơn giản, chúng tôi sẽ tải toàn bộ nội dung trang web từ URL từ xa. Đối với điều đó, chúng tôi cần cung cấp import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
class MyInlineWeb extends Component {
render() {
return (
<WebView
originWhitelist={['*']}
source={{ html: '<h2>This is a static HTML source!</h2>' }}
/>
);
}
} 3tùy chọn cho phần import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
class MyInlineWeb extends Component {
render() {
return (
<WebView
originWhitelist={['*']}
source={{ html: '<h2>This is a static HTML source!</h2>' }}
/>
);
}
} 2hỗ trợ của
WebView thành phần như được hiển thị trong đoạn mã bên dưới:import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
class MyWeb extends Component {
render() {
return <WebView source={{ uri: 'https://instamobile.io/blog' }} />;
}
}
Do đó, chúng tôi sẽ nhận được toàn bộ trang web của trang web được mở trong chính chế độ xem web của ứng dụng như được hiển thị trong ảnh chụp màn hình bên dưới: Thêm một Loading Spinner vào React Native WebviewTrong khi truy cập URL từ WebView thành phần, có thể mất một khoảng thời gian để tải toàn bộ nội dung HTML trên trang web. Vì vậy, để biểu thị độ
trễ, chúng tôi sẽ hiển thị chỉ báo tải cho đến khi trang web tải. Đối với điều này, chúng tôi cần nhập import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
class MyInlineWeb extends Component {
render() {
return (
<WebView
originWhitelist={['*']}
source={{ html: '<h2>This is a static HTML source!</h2>' }}
/>
);
}
} 7thành phần từ gói gốc phản ứng như được hiển thị trong đoạn mã bên dưới:import { Text, View, StyleSheet, ActivityIndicator } from 'react-native';
Bây giờ, chúng ta cần sử dụng import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
class MyInlineWeb extends Component {
render() {
return (
<WebView
originWhitelist={['*']}
source={{ html: '<h2>This is a static HTML source!</h2>' }}
/>
);
}
} 8thành phần trong dự án của mình. Đối với điều đó, chúng tôi sẽ tạo một hàm được gọi là hàm import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
class MyInlineWeb extends Component {
render() {
return (
<WebView
originWhitelist={['*']}
source={{ html: '<h2>This is a static HTML source!</h2>' }}
/>
);
}
} 9này sẽ trả về import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
class MyInlineWeb extends Component {
render() {
return (
<WebView
originWhitelist={['*']}
source={{ html: '<h2>This is a static HTML source!</h2>' }}
/>
);
}
} 7như được hiển thị trong đoạn mã bên dưới:import * as React from 'react';
import { Text, View, StyleSheet,ActivityIndicator } from 'react-native';
import { WebView } from 'react-native-webview';
import { Card } from 'react-native-paper';
function LoadingIndicatorView() {
return <ActivityIndicator color='#009b88' size='large' ></div>
}
export default function App() {
return (
<WebView
originWhitelist={['*']}
source={{ uri: 'https://instamobile.io/blog' }}
renderLoading={this.LoadingIndicatorView}
startInLoadingState={true}
></WebView>
);
}
Ở đây, chúng tôi đã sử dụng import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
class MyWeb extends Component {
render() {
return <WebView source={{ uri: 'https://instamobile.io/blog' }} />;
}
} 1với import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
class MyWeb extends Component {
render() {
return <WebView source={{ uri: 'https://instamobile.io/blog' }} />;
}
} 2và các import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
class MyWeb extends Component {
render() {
return <WebView source={{ uri: 'https://instamobile.io/blog' }} />;
}
} 3đạo cụ. Sau đó, chúng ta
đã gọi import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
class MyWeb extends Component {
render() {
return <WebView source={{ uri: 'https://instamobile.io/blog' }} />;
}
} 4hàm vào chỗ dựa import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
class MyWeb extends Component {
render() {
return <WebView source={{ uri: 'https://instamobile.io/blog' }} />;
}
} 5của WebView thành phần. Điều này cho phép chúng tôi hiển thị chỉ báo tải cho đến khi trang web tải hoàn toàn. Chúng ta có thể thấy rằng import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
class MyWeb extends Component {
render() {
return <WebView source={{ uri: 'https://instamobile.io/blog' }} />;
}
} 7prop cũng được sử dụng ở đây. Giá trị boolean này buộc WebView hiển thị chế độ xem đang tải trên lần tải đầu tiên. Giá đỡ này phải được đặt để import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
class MyWeb extends Component {
render() {
return <WebView source={{ uri: 'https://instamobile.io/blog' }} />;
}
} 9chân import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
class MyWeb extends Component {
render() {
return <WebView source={{ uri: 'https://instamobile.io/blog' }} />;
}
} 5chống hoạt động. Do đó, chúng tôi nhận được kết quả sau trong mô phỏng giả lập của chúng tôi:Phần kết luậnTrong
hướng dẫn này, chúng ta đã tìm hiểu về thuộc tính chế độ xem web của React Native. Vì tính năng xem web tích hợp của React Native sẽ không được dùng nữa, chúng tôi đã học cách sử dụng plugin chế độ xem web của bên thứ ba có tên là react-native-webview . Đầu tiên, chúng ta đã học cách hiển thị nội dung HTML đơn giản bằng cách sử dụng thành phần WebView. Sau đó, chúng tôi có giải thích chi tiết về cách sử dụng thành phần WebView và các đạo cụ của nó để hiển thị toàn bộ nội dung
HTML từ URL cùng với chỉ báo tải. Trong trường hợp bạn muốn tìm hiểu thêm, bạn có thể đi tới kho lưu trữ chính để thảo luận về plugin chế độ xem web này. 4 hữu ích 0 bình luận 15k xem chia sẻ 0 bình luận 15k xem chia sẻ
|