File System Access – React Native

React Native cho phép chúng ta sử dụng File Picker để chọn một tệp tin hoặc một văn
bản. Và để làm điều này chúng ta phải sử dụng thư viện tên là react-native-document-
picker hoặc expo-document-picker. Lệnh: npm i react-native-document-picker / npm i
expo-document-picker để thêm thư viện vào node-modules cũng như vào
package.json.
Mục đích chính của thư viện này cung cấp cho chúng ta component DocumentPicker
rất hữu dụng trong việc lựa chọn bất kỳ loại tệp tin nào từ bộ nhớ của thiết bị di động
của bạn. DocumentPicker cho phép chúng ta chọn một hoặc nhiều tệp tin. Sau đây là
đoạn code cho phép chúng ta chọn một tệp tin:
1. Chọn Tệp tin: react-native-document-picker:
try {
const res = await DocumentPicker.pick({
type: [DocumentPicker.types.allFiles],
//There can me more options as well
// DocumentPicker.types.allFiles
// DocumentPicker.types.images
// DocumentPicker.types.plainText
// DocumentPicker.types.audio
// DocumentPicker.types.pdf
});
//Printing the log realted to the file
console.log('res : ' + JSON.stringify(res));
console.log('URI : ' + res.uri);
console.log('Type : ' + res.type);
console.log('File Name : ' + res.name);
console.log('File Size : ' + res.size);
//Setting the state to show single file attributes
this.setState({ singleFile: res });
} catch (err) {
//Handling any exception (If any)
if (DocumentPicker.isCancel(err)) {
//If user canceled the document selection
alert('Canceled from single doc picker');
} else {
//For Unknown Error
alert('Unknown Error: ' + JSON.stringify(err));
throw err;
 }
}

Hình 1 - File Extension được hỗ trợ

Đây là các trường có thể sử dụng để DocumentPicker lọc ra các loại tệp tin mà ứng
dụng React Native cho phép sử dụng.

Hình 2 - Chế độ chọn tất cả: allFiles

Hình 3 - Chỉ chọn PDF
Chế độ chọn pdf. Làm mờ và cấm chọn tất cả các loại tệp tin khác ngoại trừ tệp tin
pdf.
*expo-document-picker:
Bắt đầu với việc cài đặt thư viện vào node_modules: npm i expo-document-picker
(nếu dùng expo)
try {
var doc = await DocumentPicker.getDocumentAsync()
console.log(doc)
if (doc.canceled)
console.log("Operation is canceled")
} catch (err) {
console.log("Unknown error: ", err)
}
Hình 4 - DocumentPicker của expo

Mặc định là tất cả loại file đều có thể được chọn. Để gọi lệnh thực hiện thư viện của
android, ta chỉ cần gọi hàm getDocumentAsync() để hệ điều hành android mở
FileManager.

Hình 5 - Hàm getDocumentAsync() của expo

Hình 6 - Sau khi nhấn Click me: Mở fileManager

2. Xem tệp tin: react-native-file-viewer

Lệnh download: npm i react-native-file-viewer

Sau khi sử dụng nút chooseDoc, kho chứa dữ
liệu sẽ mở ra cho chúng ta chọn tất cả những
file được xác định cụ thể ở phần code. Sau khi
chạm để chọn một tệp tin mình muốn thì
DocumentPicker sẽ trả về giá trị thông tin của
tệp tin đó. Từ đó, ta dùng react-native-file-
viewer để xem nội dung có trong tệp tin đó.

Những tệp tin là hình ảnh sẽ được phóng lớn

lên để xem rõ hơn bức hình, cũng như thông tin
về hình ảnh đó. Ngoài ra nếu chọn tệp tin pdf
thì sẽ có thể xem nội dung trong đó. Đọc như
đọc một quyển sách e-book.

Hình 7 - Chọn một tệp tin để mở chế độ Xem

 3. react-native-image-picker
Lệnh download: npm i react-native-image-picker
Thư viện này có tác dụng chọn tệp tin giống DocumentPicker nhưng chỉ chọn được
dạng hình ảnh, video. Các hình ảnh được chọn cũng trả về một Object bao gồm các
trường để xác nhận tệp tin đã thực thi thành công hay không và cuối cùng là assets
chứa thông tin của tệp tin đó.

Hình 8 - Source kết quả trả về của ImagePicker

Kết quả thu được:

Hình 9 - Log ra kết quả thu được sau khi chọn hình, video
Từ kết quả thu được, ta có thể lấy đường dẫn “uri” để đưa vào FileViewer để xem
thông tin của tệp tin được chọn, hoặc sử dụng hình, video đó để hiển thị lên trên ứng
dụng của mình.
Hình 10 - Đưa đường dẫn vào Image source
Ngoài chức năng chọn các tệp tin hình ảnh video, thì react-native-image-picker còn có
chức năng launchCamera để thực hiện chụp ảnh.

Hình 11 - Camera được mở lên trên mobile

Kết quả thu được sau khi nhấn chụp ảnh:

Đường dẫn của hình ảnh (originalPath) được

đặt vào trường source của thẻ Image giúp ứng
dụng hiển thị ra hình ảnh hoặc video được chọn
thông qua việc chụp hình hoặc quay video
Thông tin đó cũng được đặt vào thẻ Text để
mục đích chủ yếu là có thông tin chính xác mà
không bị lỗi.

Hình 12 - Sau khi chụp hình

4. react-native-html-to-pdf
Lệnh download: npm i react-native-html-to-pdf
Mục đích của thư viện này như tên đề cập: Chuyển đổi từ chuỗi html thành tệp tin pdf.
Thư viện này khá hữu ích trong việc lưu trữ về máy của mình những thông tin cần
thiết như: hóa đơn điện tử, thông tin đơn đặt hàng, thu thập ý tưởng cho những thông
tin có liên quan vào cùng một chỗ, lưu trữ một bài viết dài,…
Hình 13 - Hàm createPDF và nút Tao PDF
Sử dụng nút Tao PDF với function createPDF để tạo ra file pdf tên “test” ở thư mục
docs trong external storage, chuỗi html được đặt với nội dung bất kỳ. Lúc này ta sẽ
được một file pdf với nội dung giống như file html nằm ở đường dẫn
“/storage/emulated/0/Android/data/com.test3/files/docs/test.pdf”.

Hình 14 - Lưu trong bộ nhớ và nhấn vào để xem

5. react-native-print
Lệnh download: npm i react-native-print
 Đối với thư viện này thì chúng ta có thể áp dụng cả thư viện react-native-html-to-
pdf để thực hiện cả hai việc cùng lúc, chính là vừa tạo ra file pdf thông qua chức
năng chuyển đổi từ chuỗi html sang pdf, vừa có thể thực hiện chức năng in ấn, tìm
máy in để bắt đầu quá trình in ấn.

Hình 15 - Thêm ba hàm in ấn tương ứng với ba nút

Ở đây ta có hàm printHTML với đối số truyền vào là một object có property là html.
RNPrint.print() ở đây có thể thực hiện in ra, hoặc lưu lại bản pdf từ html trực tiếp
giống như RNHTMLtoPDF.

Hình 16 - Hàm printPDF

Hàm printPDF thì tận dụng kết quả trả về từ việc chuyển đổi HTML sang PDF của
RNHTMLtoPDF như filePath để thực hiện lấy file tại địa điểm đó và in ra máy in,…
Hình 17 - Hàm printRemotePDF
Hàm printRemotePDF cho phép chúng ta dùng đường dẫn trực tiếp từ Internet để thực
hiện in file PDF được cung cấp. Trang web được dẫn tới trông như sau:

Hình 18 - Trang cung cấp file Dummy.pdf từ Internet