Mục lục bài viết
Giới thiệu
React Native của Facebook là một framework can đảm và mạnh mẽ được cho phép bạn nhanh gọn và thuận tiện kiến thiết xây dựng những ứng dụng Android và iOS chỉ bằng JavaScript và JSX. Các ứng dụng được kiến thiết xây dựng bằng React Native tận dụng những thành phần giao diện người dùng gốc và do đó không hề phân biệt với những ứng dụng được kiến thiết xây dựng trực tiếp bằng SDK của Android và iOS. Hiệu suất của chúng cũng không quá thua kém so với những ứng dụng gốc, chính bới phần đông toàn bộ code JavaScript chạy trong nền trên một đối tượng người tiêu dùng nhúng của JavaScriptCore, tương tự như JavaScript engine phân phối cho Safari của Apple. Trong hướng dẫn này, tôi sẽ giúp bạn làm quen với React Native cho Android bằng cách hướng dẫn bạn tạo một ứng dụng từ điển Anh-Đức đơn thuần.
Yêu cầu
Trước khi bắt đầu, hãy đảm bảo là bạn đã cài đặt những phần mềm sau đây trên máy tính của bạn:
Bạn đang đọc: Tạo một Ứng dụng Từ điển bằng React Native cho Android
- phiên bản Android SDK và Android Support Library mới nhất
- hiên bản Node.js mới nhất
Tính đến tháng 9 năm năm ngoái, React Native chỉ được tương hỗ trên OS X. Tuy nhiên, với sự tương hỗ của một vài script, React Native v0. 11.4 hoạt động giải trí tốt trên Ubuntu 14.04.
1. Cài đặt React Native
React Native tồn tại dưới dạng một gói Node.js và có thể được cài đặt nhanh chóng bằng npm, Node Package Manager.
Để sử dụng React Native cho việc phát triển ứng dụng Android, bạn nên thiết lập giá trị của một biến môi trường có tên là ANDROID_HOME thành đường dẫn tuyệt đối của thư mục chứa Android SDK. Nếu bạn đang sử dụng Bash shell, bạn có thể thiết lập biến bằng export.
2. Tạo một Dự án Mới
Để tạo một dự án React Native, bạn nên sử dụng giao diện dòng lệnh hoặc CLI của React Native, nó có thể được truy xuất bằng lệnh react-native. Chúng ta đang tạo một ứng dụng từ điển trong hướng dẫn này vì vậy chúng ta hãy gọi dự án là Dictionary.
Một khi lệnh đã thực thi xong, bạn sẽ có một thư mục mới có tên là Dictionary, chứa một ứng dụng React Native cơ bản. Chuyển đến thư mục mới bằng lệnh cd.
Trước khi bạn liên tục, tôi khuyên bạn nên chạy ứng dụng cơ bản này để bảo vệ rằng môi trường tự nhiên tăng trưởng của bạn có toàn bộ mọi thứ mà React Native cần. Để làm điều đó, hãy gõ lệnh sau đây :
Bây giờ bạn sẽ thấy một ứng dụng được gọi là Dictionary đã được cài đặt trên emulator của bạn. Hãy nhấp vào biểu tượng của nó để chạy nó. Nếu mọi việc suôn sẻ, bạn sẽ thấy màn hình như sau:
3. Chuẩn bị Khởi điểm của Ứng dụng
Mặc định, khởi điểm của ứng dụng Android bằng React Native là tập tin JavaScript index.android.js. Khi bạn tạo dự án bằng CLI của React Native, thì tập tin này được tạo ra một cách tự động. Tuy nhiên, nó chứa code thuộc về ứng dụng cơ bản. Bạn có thể chỉnh sửa và sử dụng các phần của code đó cho ứng dụng của bạn hoặc bạn chỉ cần xóa tất cả và bắt đầu từ đầu. Đối với hướng dẫn này, tôi đề nghị bạn làm theo cách thứ hai.
Một khi bạn đã xóa nội dung của index.android.js, hãy sử dụng require để nạp một mô-đun gọi là react-native. Mô-đun này chứa tất cả hàm của React Native và các đối tượng mà bạn cần để tạo ứng dụng của bạn.
4. Tạo một Thành phần React
Các thành phần React là các đối tượng JavaScript chịu trách nhiệm kết xuất và tự động cập nhật giao diện người dùng của ứng dụng React Native. Trên thực tế, hầu hết mọi yếu tố giao diện người dùng của ứng dụng React Native là một thành phần React. Điều này có nghĩa là, để tạo giao diện người dùng ứng dụng của bạn, bạn cần tạo thành phần React tuỳ biến của riêng mình. Để làm điều đó, sử dụng hàm createClass của React. Đoạn code sau đây tạo một thành phần gọi là Dictionary:
Bạn hoàn toàn có thể xem thành phần này như là màn hình hiển thị tiên phong của ứng dụng.
Bước 1: Định nghĩa Layout
React Native tự động gọi hàm render mỗi khi nó cần vẽ hoặc cập nhật một thành phần. Vì vậy, bạn phải thêm hàm này vào thành phần của bạn. Bên trong hàm, bạn có thể xác định layout của thành phần bằng JSX, một cú pháp mở rộng của JavaScript cho phép bạn dễ dàng kết hợp các thẻ XML với code JavaScript.
React Native cung cấp một số thành phần mà bạn có thể sử dụng để sắp xếp layout. Bây giờ, chúng ta sẽ được sử dụng một React.View như là một container (phần tử kho chứa), một React.Text để hiển thị văn bản, và một React.TextInput để chấp nhận đầu vào từ người dùng. Thêm code sau đây vào thành phần:
Nếu bạn nắm vững HTML, bạn có thể nghĩ về View như là một div trong HTML, Text như là một span trong HTML và TextInput như một phần tử input trong HTML.
Bước 2: Thêm Phong cách
Trong đoạn code ở trên, một số thành phần có một thuộc tính style. Thuộc tính style khá tương đồng với thuộc tính class của HTML. Tuy nhiên, thay vì tham chiếu đến một class CSS trong một stylesheet, nó tham chiếu đến một đối tượng JSON trong một đối tượng React.StyleSheet.
Để tạo một đối tượng React.StyleSheet cho ứng dụng của bạn, bạn cần sử dụng hàm React.StyleSheet.create. Theo như đối số duy nhất của nó, thì nó nhận một đối tượng JSON chứa các phong cách của các thành phần riêng lẻ. Đây là những phong cách mà tôi đã sử dụng cho ứng dụng ví dụ của chúng ta:
Bước 3: Đăng ký Thành phần
Để cho React Native biết rằng nó nên kết xuất thành phần của bạn khi ứng dụng của bạn khởi chạy, bạn phải đăng ký nó bằng hàm React.AppRegistry.registerComponent. Để làm điều đó, hãy thêm code sau vào cuối index.android.js:
Nếu bạn không nắm vững những hàm arrow của ES6, thì bạn chỉ cần sử dụng code JavaScript thường thì sau đây để sửa chữa thay thế :
Nếu bạn muốn, bạn có thể tải lại ứng dụng của mình để xem layout mới. Để làm điều đó, hãy bấm vào nút menu trên emulator của bạn và nhấp vào Reload JS.
4. Điều khiển Trạng thái của Thành phần
Tất cả các thành phần có một biến thành viên đặc biệt được gọi là state, nó là một đối tượng JSON. Nó đặc biệt, bởi vì ngay khi biến state của một thành phần thay đổi, React Native tự động tái kết xuất thành phần để phản ánh sự thay đổi này. Đây là một tính năng rất hữu ích và bằng cách sử dụng nó một cách chính xác, bạn có thể loại bỏ việc lấy hoặc cập nhật nội dung trong các phân tử giao diện người dùng của ứng dụng bằng tay.
Hãy thêm hai khoá, input và output, vào biến state của thành phần Dictionary. Để làm như vậy, bạn sẽ phải sử dụng một hàm gọi là getInitialState. Giá trị trả về của hàm này trở thành state (trạng thái) của thành phần.
Bây giờ bạn có thể liên kết TextInput với input và thành phần Text với output. Sau khi làm như vậy, layout của bạn sẽ giống như thế này:
Như bạn có thể thấy, input sẽ chứa từ tiếng Anh mà người dùng nhập vào trong khi output sẽ chứa từ tiếng Đức tương ứng của nó.
Mặc dù những thay đổi state được tự động đẩy vào giao diện người dùng, nhưng ngược lại thì không đúng. Điều này có nghĩa là, state của thành phần không thay đổi nếu người dùng nhập một cái gì đó vào TextInput. Để cập state một cách thủ công, bạn nên sử dụng phương thức setState của thành phần.
Để gửi giá trị của TextInput đến input, bạn có thể thêm một listener onChangeText vào TextInput và thực hiện cuộc gọi setState bên trong nó. Sử dụng ES6, thẻ TextInput sẽ giống như thế này:
Tại thời điểm này, bất cứ điều gì mà người dùng nhập vào TextInput của ứng dụng của bạn đều có sẵn trong input. Tất cả những gì còn lại để làm là ánh xạ input sang tiếng Đức tương ứng và cập nhật output. Để làm điều đó, bạn có thể sử dụng một từ điển có tên là Mr.Honey’s Beginner’s Dictionary (Đức-Anh) của Winfried Honig. Tải về JSON tương ứng của từ điển từ GitHub và thêm nó vào dự án của bạn.
Để nạp từ điển bên trong index.android.js, hãy sử dụng require.
Vì english_german không có gì khác hơn một đối tượng JSON toàn cục, nơi mà các từ tiếng Anh là các khóa và các từ tương đương của tiếng Đức là các giá trị, tất cả những gì bạn phải làm bây giờ là kiểm tra xem input có là một khoá hay không, nếu có, hãy gọi setState để gán các giá trị được liên kết vào output. Code để làm điều đó có thể như sau:
Bây giờ bạn có thể chỉ định showMeaning cho listener onSubmitEditing của TextInput để nó chỉ được gọi khi người dùng đã gõ xong.
Ứng dụng từ điển của bạn đã chuẩn bị sẵn sàng. Bạn hoàn toàn có thể tải lại nó và gõ vào một từ tiếng Anh để ngay lập tức xem bản dịch sang tiếng Đức. 
Tóm tắt
Trong hướng dẫn này, bạn đã học được cách cài đặt React Native và sử dụng nó để tạo ứng dụng Android đầu tiên của bạn, một từ điển Anh-Đức, chỉ sử dụng JavaScript và JSX. Song song đó, bạn đã học được cách tạo ra một thành phần tùy biến, trang trí nó và sử dụng state (trạng thái) của nó để kiểm soát những gì mà nó hiển thị.
Để tìm hiểu và khám phá thêm về React Native, bạn hoàn toàn có thể xem qua tài liệu hướng dẫn .
Source: https://bem2.vn
Category: Ứng dụng hay
