Nội dung
- 1 phản ứng WebView bản địa React Native WebView
- 2 nhiệm vụ Tasks
- 2.1 1. Tải trang web từ URL 1. Loading of WebPage from URL
- 2.2 2. Tải trang HTML từ một biến với chuỗi HTML 2. Load HTML Page from a variable with HTML String
- 2.3 3. Tải tệp HTML cục bộ 3. Load a Local HTML File
- 3 để tạo một ứng dụng tự nhiên phản ứng To Make a React Native App
- 4 Cài đặt phụ thuộc Installation of Dependency
- 5 Cài đặt ca cao CocoaPods Installation
- 6 cấu trúc tập tin dự án Project File Structure
- 7 mã Code
- 7.1 app.js App.js
- 8 để chạy ứng dụng & nbsp; React gốc To Run the React Native App
- 9 ảnh chụp màn hình đầu ra Output Screenshots
- 9.1 iOS IOS
- 9.2 Android Android
Tải tệp HTML cục bộ hoặc URL trong React Native bằng cách sử dụng React-I-WebView là bài đăng được cập nhật và kết hợp của 2 bài đăng cuối cùng của chúng tôi & NBSP; Mở bất kỳ trang web nào trong React Native WebView và & NBSP; React Load Nove Location HTML File trong WebView.
Trong ví dụ này, chúng tôi sẽ sử dụng & nbsp; thành phần <WebView style={{flex: 1}} originWhitelist={['*']} source={{ html: '<h2>Hello</h2>' }} style={{ marginTop: 20 }} javaScriptEnabled={true} domStorageEnabled={true} />4 từ ____ 15. & nbsp; Chúng tôi sẽ tạo một trang duy nhất mà chúng tôi sẽ có 3 nút sẽ tải dữ liệu trong WebView từ các tài nguyên khác nhau.
Nhiệm vụ
Các nhiệm vụ khác nhau & nbsp; mà bạn có thể thấy trong ví dụ này là:
1. Tải trang web từ URL
<WebView style={{flex: 1}} originWhitelist={['*']} source={{ uri: "//aboutreact.com" }} style={{ marginTop: 20 }} javaScriptEnabled={true} domStorageEnabled={true} />2. Tải trang HTML từ một biến với chuỗi HTML
<WebView style={{flex: 1}} originWhitelist={['*']} source={{ html: '<h2>Hello</h2>' }} style={{ marginTop: 20 }} javaScriptEnabled={true} domStorageEnabled={true} />3. Tải tệp HTML cục bộ
if(isAndroid){ return ( <WebView style={{flex: 1}} originWhitelist={['*']} source={{uri:'file:///android_asset/index.html'}} style={{ marginTop: 20 }} javaScriptEnabled={true} domStorageEnabled={true} /> ) }else{ return( <WebView style={{flex: 1}} originWhitelist={['*']} source={'./resources/index.html'} style={{ marginTop: 20 }} javaScriptEnabled={true} domStorageEnabled={true} /> ); }Để tạo một ứng dụng tự nhiên phản ứng
Bắt đầu với React Native sẽ giúp bạn biết thêm về cách bạn có thể thực hiện một dự án bản địa phản ứng. Chúng tôi sẽ sử dụng init-bản địa phản ứng để tạo ứng dụng gốc phản ứng của chúng tôi. Giả sử rằng bạn đã cài đặt nút, bạn có thể sử dụng NPM để cài đặt tiện ích dòng lệnh <WebView style={{flex: 1}} originWhitelist={['*']} source={{ html: '<h2>Hello</h2>' }} style={{ marginTop: 20 }} javaScriptEnabled={true} domStorageEnabled={true} />6. Mở thiết bị đầu cuối và đi đến không gian làm việc và chạy
npm install -g react-native-cliChạy các lệnh sau để tạo một dự án gốc React mới
react-native init ProjectNameNếu bạn muốn bắt đầu một dự án mới với một phiên bản gốc React, bạn có thể sử dụng đối số -sự thay đổi:
react-native init ProjectName --version X.XX.Xreact-native init ProjectName --version react-native@nextĐiều này sẽ tạo cấu trúc dự án với một tệp chỉ mục có tên App.js trong thư mục dự án của bạn.
Cài đặt phụ thuộc
Để sử dụng ________ 14 & nbsp; bạn cần cài đặt <WebView
style={{flex: 1}}
originWhitelist={['*']}
source={{ html: '<h2>Hello</h2>' }}
style={{ marginTop: 20 }}
javaScriptEnabled={true}
domStorageEnabled={true}
/>5 phụ thuộc. Để cài đặt sự phụ thuộc này & nbsp; mở thiết bị đầu cuối và nhảy vào dự án của bạn
To install this dependency open the terminal and jump into your project
Chạy các lệnh sau
npm install react-native-webview --saveLệnh này sẽ sao chép sự phụ thuộc vào thư mục node_module của bạn. CấmSave là tùy chọn, nó chỉ để cập nhật phụ thuộc trong tệp pack.json của bạn.
Cài đặt ca cao
Sau khi cập nhật phản ứng gốc 0,60, họ đã giới thiệu tự động liên kết để chúng tôi không yêu cầu liên kết thư viện nhưng cần cài đặt POD. Vì vậy, để cài đặt Pods sử dụng
cd ios && pod install && cd ..Cấu trúc tập tin dự án
Nếu bạn muốn tải HTML từ tệp HTML cục bộ vào WebView thì bạn cần đưa chúng vào thư mục được mô tả dưới đây. & NBSP; Bạn phải tạo 2 bản sao của tệp HTML và phải đặt chúng vào một vị trí khác cho Android và iOS. Nếu các thư mục không có ở đó thì vui lòng tạo thư mục và sau đó đặt tệp HTML.
1
2. iOS sẽ tải HTML & NBSP bên ngoài; từ dự án> Tài nguyên> index.html
Mã số
Bây giờ hãy mở app.js trong bất kỳ trình chỉnh sửa mã nào và thay thế mã bằng mã sau
App.js
<WebView style={{flex: 1}} originWhitelist={['*']} source={{ html: '<h2>Hello</h2>' }} style={{ marginTop: 20 }} javaScriptEnabled={true} domStorageEnabled={true} />0Để chạy ứng dụng & nbsp; React gốc
Mở lại thiết bị đầu cuối và nhảy vào dự án của bạn bằng cách sử dụng.
cd ProjectNameĐể chạy dự án trên thiết bị ảo Android hoặc trên thiết bị gỡ lỗi thực
<WebView style={{flex: 1}} originWhitelist={['*']} source={{ html: '<h2>Hello</h2>' }} style={{ marginTop: 20 }} javaScriptEnabled={true} domStorageEnabled={true} />2hoặc trên trình giả lập iOS bằng cách chạy (chỉ chạy macOS)
<WebView style={{flex: 1}} originWhitelist={['*']} source={{ html: '<h2>Hello</h2>' }} style={{ marginTop: 20 }} javaScriptEnabled={true} domStorageEnabled={true} />3Tải xuống mã nguồn
Ảnh chụp màn hình đầu ra
IOS
Android
Đây là cách bạn có thể tải tệp HTML hoặc URL cục bộ trong React Native bằng cách sử dụng React-I-love-WebView. Nếu bạn có bất kỳ nghi ngờ hoặc bạn muốn chia sẻ điều gì đó về chủ đề bạn có thể nhận xét bên dưới hoặc liên hệ với chúng tôi ở đây. Sẽ có nhiều bài viết sắp ra mắt. Giữ nguyên!
Hy vọng bạn thích nó. 🙂