[RN] React Native Cheat Sheet
Bài viết này mình sẽ tổng hợp các câu lệnh hay dùng, các đoạn code snippets, các mẹo và thủ thuật trong React Native.
Creating Project
Mở terminal các bạn gõ câu lệnh sau để khởi tạo một project mới
Chạy app trên máy ảo IOS
Chạy app trên máy ảo Android
Chỉ định chạy trên một máy ảo cụ thể
Liệt kê các thiết bị có sẵn
Linking Dependencies
Thi thoảng bạn cần phải Linking Dependencies của các thư viện bên thứ 3. Giả dụ bạn cài đặt thư viện react-native-vector-icons và sau đó để có thể thêm icons fonts cho project thì bạn phải thực hiện câu lệnh sau:
Upgrading React Native
Để upgrade React Native lên bản mới nhất ta thực hiện:
Upgrading NPM Packages
Để liệt kê tất cả các packages lỗi thời ta thực hiện:
Để update một package lên bản mới nhất ta thực hiện:
Enabling Hot Reloading
Một khi đã enable, hot reloading cho phép bạn thấy thay đổi ui ngay trên simulator mỗi khi bạn thay đổi code.
Để bật tính năng hot reloading thì trước tiên bạn phải chạy project trên simulator đã. Sau đó bạn ấn tổ hợp phím ⌘+D nếu bạn chạy trên máy ảo Ios hoặc ⌘+M nếu bạn chạy trên máy ảo Android và lựa chọn Enable Hot Reloading.
Enabling Remote Debugging
Tính năng này cho phép bạn Debug ngay trên trình duyệt Chrome của chúng ta.
Để bật tính năng remote debugging thì trước tiên bạn phải chạy project trên simulator đã. Sau đó bạn ấn tổ hợp phím ⌘+D nếu bạn chạy trên máy ảo Ios hoặc ⌘+M nếu bạn chạy trên máy ảo Android và lựa chọn Debug JS Remotely.
Code Snippets
Detecting Screen Size
Thi thoảng bạn sẽ cần biết size màn hình của điện thoại đang dùng là bao nhiêu để điều chỉnh bố cục, font size…. cho hợp lý.
Sau đây là một vài size màn hình bạn có thể tham khảo:
- iPhone 5: 320 x 568
- iPhone 6: 375 x 667
- iPhone 6 Plus: 414 x 736
Transforming Text
Để chuyển text thành chữ hoa ta sử dụng:
Để chuyển text thành chữ thường ta sử dụng:
Giới hạn số dòng hiển thị cho Text component
Components
Về cơ bản 1 component sẽ như sau:
Default Prop Values
Để set giá trị mặc định cho một prop ta sử dụng thuộc tính defaultProps. Ví dụ dưới đây ta set giá trị mặc định cho title prop.
Spread Attributes
Về cơ bản đoạn code trên là:
Styling
Thiết lập nhiều style cho một Component
Bạn có thể sử dụng array để có thể đặt nhiều style cho một component
Tạo một view hình tròn
Flexbox
Giá trị mặc định của thuộc tínhflexDirection là column có nghĩa là các thành phần con sẽ được sắp xếp trên cùng 1 cột, và ngược lại với column là row các thành phần con sẽ được sắp xếp trên cùng 1 hàng.
Justify Content
Thêm thuộc tính justifyContent tới style của một thành phần sẽ phân bổ theo vị trí tương đối của chúng trong cùng một hướng sắp đặt .Có một vài lựa chọn như sau:
flex-start (mặc định) — Các thanh phần con được phân bổ theo hướng từ điểm bắt đầu.
center — Các thanh phần con được phân bổ chính giữa.
flex-end — Các thanh phần con được phân bổ theo hướng từ điểm kết thúc.
space-around — Các thanh phần con được phân bổ bởi các khoảng trống bằng nhau
space-between — Các thanh phần con được phân bổ đều nhau.
Align Items
Thêm thuộc tính alignItems tới style của một thành phần để thay đổi các đối tượng con theo hướng sắp đặt còn lại(ví dụ như nếu như hướng sắp xếp lúc đầu để là row thì hướng sắp xếp còn lại sẽ là theo column, và ngược lại thì tương tự). Có một vài lựa chọn như sau:
flex-start — Các thành phần con được đặt ở đầu.
center — Các thành phần con được đặt ở giữa.
flex-end — Các thành phần con được đặt ở cuối.
stretch (Mặc định)— Các thành phần con co giãn để nấp đầy đối tượng cha. Để cho thuộc tính stretch có thể thể hiện được, thì những view con cần phải có một kích thước cố định trong hướng sắp đặt còn lại.
Kết thúc.
Mình hi vọng các bạn có thể tìm được điều gì đó có ích cho các bạn trong bài viết này. Bài tới mình sẽ hướng dẫn các bạn xây dựng một ứng dụng RN hoàn chỉnh. Xin chào và hẹn gặp lại.
Bài viết được tham khảo tại Link.
