Như đã nói ở bài viết lần trước, lần này mình sẽ hướng dẫn học React Native thông qua một số project, project đầu tiên có tên là Albums, sau khi hoàn thành project này, kết quả của project là một albums ảnh và tiêu đề hiện lên màn hình thiết bị, project sẽ trang bị cho các bạn một số kiến thức về React Native, cách nó hoạt động, và một số thẻ cơ bản trong React Native, để hiểu một cách dễ dàng hơn, các bạn nên có một chút kiến thức về HTML, CSS và JavaScript
Mở cmd, chạy các lệnh sau:
Mở project lên, xóa file App.js, index.js, sau đó tạo 2 file index.ios.js và index.android.js với cùng một nội dung như sau:
React Native sử dụng AppRegistry để đăng ký tên cho App, và đồng thời cũng dùng để xác định root component, ở đây là App.js. Mình sẽ giới thiệu cho các bạn sự khác nhau giữa React và React Native:
| React | React Native |
|---|---|
| Cho biết component hoạt động như thế nào Biết làm thế nào để lấy ra một nhóm các component và làm cho chúng hoạt động với nhau | Lấy dữ liệu ra từ Component và hiển thị nó lên màn hình Cung cấp những component mặc định (Image, Text) |
Tiếp theo, tạo folder src, đây sẽ là file chứa source code của toàn bộ project, trong folder src, tạo file App.js
Chạy thử project:
và kết quả:
Bước tiếp theo, trong src tạo file Header.js:
Ở đây App.js là ‘root’ component, sử dụng để kết hợp tất cả những component con lại làm việc với nhau, sử dụng AppRegistry.
Sau đó quay trở lại App.js:
Để thêm css cho các thẻ trong React Native, khai báo thêm một biến object có tên là styles, bên trong là các object có chứa các thuộc tính css cho từng JSX.
Sau đó, style cho JSX:
Ở trên các bạn đã thấy mình truyền tham số props cho Header, props trong React Native bạn có thể hiểu đơn giản là một object chứa các giá trị thuộc tính của component, và chúng được truyền từ component cha xuống, tác dụng của props đó là có thể sử dụng component ở nhiều chỗ khác nhau trong app, ví dụ như hình sau:
Để hiển thị component Header với headerText là Albums chúng ta chỉ việc gọi nó ở trong component cha (App.js) và truyền cho nó giá trị của thuộc tính headerText. Props thực sự làm cho các component rất linh hoạt về mặt thay đổi nội dung. Các bạn nên lưu ý là các bạn không thể thay đổi giá trị của props trong component con được, vì giá trị của props là nhận được từ component cha.
Bây giờ chúng ta sẽ đi đến phần thân của albums, trước hết chúng ta cần một file dữ liệu ở dạng json, các bạn có thể dùng đường dẫn này để lấy file:
http://rallycoding.herokuapp.com/api/music_albums
trong src/components tạo AlbumsList, file này sẽ để hiển thị danh sách các ảnh và tiêu đề trong albums.
Sau đó import AlbumList vào trong App.js
Ở bên trên các bạn có thể thấy cách define component App và Header khác nhau, ở App đó là class component còn khai báo Header gọi là functional Component. Dưới đây là bảng so sánh giữa functional Component và class Component.
| Functional Component | Class Component |
|---|---|
| Sử dụng cho dữ liệu tĩnh | Sử dụng cho nguồn dữ liệu động |
| Viết dễ dàng | Nhiều code hơn để viết |
| Không thể xử lý dữ liệu lấy về | Xử lý được tất cả những dữ liệu thay đổi |
Constructor là hàm khởi tạo giá trị ban đầu cho các thuộc tính, như ở ví dụ trên nó khởi tạo cho đối tượng albums là một mảng rỗng (plain array).
Hàm map là hàm callback trên mọi phần tử của mảng (album), hàm này sẽ trả về giá trị callback (AlbumDetail) và trả về một mảng có kích thước đúng với mảng albums ban đầu.
ComponentWillMount là một lifecycle method, nó được gọi ra trước khi render, như ở ví dụ trên thì dữ liệu sẽ được lấy về trước khi màn hình được hiển thị.
Nhìn qua thì có vẻ props và state khá là giống nhau, nhưng cách sử dụng và hoạt động của chúng lại hoàn toàn khác nhau. Props là thuộc tính của component có giá trị được nhận từ component cha, còn state là một object javascript. Có một điểm khác biệt cần chú ý nữa đó là props không thể thay đổi trong component, còn state lại có thể. Khi bạn cần thay đổi những gì component hiển thị, gọi hàm this.setState. Lưu ý là không thể thay đổi state bằng lệnh this.State.
Dòng 25 truyền props album xuống AlbumDetail Component
AlbumList Component là một list chứa các AlbumDetail được define trong AlbumDetail Component:
Biến album ở dòng số 6 chính là props album được truyền từ AlbumList xuống, css flexDirection column có nghĩa là sắp xếp các phần tử trong đó theo chiều dọc, justify content: space around chia đều khoảng cách giữa các phần tử.
Ở dòng số 3 và số 4, các bạn có thể nhìn thấy ../Common/Card, dấu, tức là các bạn đang muốn import 1 file ở bên ngoài thư mục chứa file bạn đang nhập, ví dụ ở đây là import file Card.js ở trong thư mục common bên ngoài thư mục components chứa file AlbumDetail.js
Card.js
Props children là tất cả những phần tử nằm trong hai thẻ đóng và mở card (được gọi trong album detail).
CardSection.js
justifyContent: flex-start set phần tử ở vị trí phía trên bên trái, flexDirection: row có tác dụng làm cho các phần tử hiển thị theo chiều ngang, nếu vượt quá chiều ngang thì xuống dòng.
Tiếp theo, trong folder common, tạo file Button.js file này define button click me ở dưới mỗi album
Khi người dùng click, TouchableOpacity sẽ tự động mờ đi trong một khoảng thời gian ngắn, rồi trở lại trạng thái ban đầu.
Sau đó gọi hiển thị component Button ở dưới image trong file AlbumDetail.js
Sửa View trong AlbumList thành ScrollView, import ScrollView từ React Native.
Chạy thử project, kết quả thu được:
Vậy là chúng ta đã hoàn thành Project đầu tiên rồi, hoàn thành project này các bạn đã trang bị được thêm cho mình một số kiến thức như props, state, style cho JSX, hàm map và một số thẻ và thư viện cơ bản trong React Native. Mọi thắc mắc và góp ý về project này các bạn có thể comment phía dưới để mình có thể giải đáp thêm nhé