Học React Native từ cơ bản đến nâng cao – Phần 2: Khái niệm cơ bản trong React Native và 1 số chia sẻ cá nhân

1812

Trong phần này tôi sẽ giúp các bạn mới học React Native hiểu qua phần cài đặt project đã tồn tại và cùng nhau tìm hiểu khái niệm cơ bản nhất của React Native.

I. Một số chia sẻ cá nhân

1. Yêu cầu thứ 1

Yêu cầu để thực hiện theo bài viết này, bạn hãy cài đặt môi trường theo bài viết dưới đây

Học React Native từ cơ bản đến nâng cao – Phần 1 Hướng dẫn cài đặt và chạy “Hello world”

2. Yêu cầu thứ 2

Khi muốn code React Native bạn sẽ phải chọn cho mình 1 Editors phù hợp cho mình

Bạn có thể tham khảo các Editors theo link dưới đây

Top 10 Editors For React Native Mobile App Development

Còn lựa chọn của tôi là Visual Studio Code vì đơn giản là dùng khá nhẹ và tiện dụng

Nếu bạn cũng chọn Visual Studio Code như tôi thì tiếp tục cài các Extension theo bài viết dưới đây để giúp việc code React Native trở nên dễ dàng hơn

VSCode for React Native:

https://medium.com/react-native-training/vscode-for-react-native-526ec4a368ce

3. Yêu cầu thứ 3

Kéo code ví dụ React Native về máy bạn:

  • Bạn mở terminalgit clone https://github.com/oTranThanhNghia/LearnReactNative.git
  • Khi đã kéo code về xong vào trong folder LearnReactNative mà vừa kéo vềgõ lệnh sau để cấu hình project: npm install [email protected]
  • Cấu hình lại Android SDK trong file local.properties trong folder của Android LearnReactNative\android ở như sau:

 

  • Chạy android gõ: react-native run-android Khi nào terminal hiển thị là bạn đã thành công.

 

Nếu bạn gặp phải lỗi sau thì hãy kiểm tra lại port 8081 có đang sử dụng không. Nếu có thì tắt nó đi và gõ lại lệnh npm start để khởi động lại Metro Bundler

  • Ngoài ra bạn hãy vào index.js để chọn example để chạy nhé:

II. Khái niệm cơ bản trong React Native

1. Props

Hầu hết các thành phần có thể custom được khi được tạo ra với các tham số khác nhau. Các tham số này được gọi là props Ví dụ về Image sẽ giúp bạn sử dụng prop source để hiển thị ảnh

 

Components bạn viết ra cũng có thể sử dụng props. Ví dụ dưới đây sẽ mô tả cách sử dụng props trong Component riêng biệt

 

Sử dụng prop name giúp bạn có thể custom Greeting component 1 cách dễ dàng và giúp tái sử dụng lại component ở nhiều nơi

2. State

Trong khi props là không thể thay đổi thì state là kiểu dữ liệu có thể update được trong tương lai

Nghe có vẻ khó hiểu nhưng bạn xem ví dụ dưới đây cho rõ ràng

 

Trong demo ở trên là ví dụ về sau 1 giây sẽ nhấp nháy chữ.

Trong đó:

  • propstext trong Blink component
  • stateisShowingText là cờ để hiển thị

3. Style

Style sẽ gợi nhắc các bạn nghĩ ngay đến style của Web. Tất cả cấu trúc, biến, giá trị hầu hết đều giống với CSS Bạn hãy xem ví dụ dưới đây

 

Trong đó:

  • set 1 phần tử: style={styles.red}
  • set 2 phần tử trở lên sẽ phải để trong [] ví dụ như style={[styles.red, styles.bigblue]}

4. Handling Touches

Các phần trên là mới chỉ đáp ứng được việc hiển thị lên app. Còn trong phần này sẽ giúp cho User tương tác được với App. Đơn giản nhất là sự kiện click vào 1 nút

Để dễ dàng nhất bạn hãy dùng cấu trúc như sau:

 

Để chi tiết hơn nữa bạn xem ví dụ sau:

 

5. List Views

React Native cung cấp 2 loại view để hiển thị list. Đó là: FlatList và SectionList

FlatList làm việc khá tốt và mượn mà với những list dài, số lượng item có thể thay đổi được. Không giống như ScrollView thì FlatList chỉ render những thành phần nào được hiển thị trên màn hình, chứ không phải là hiển thị tất cả các thành phần trong List lên cùng 1 lúc.

FlatList yêu cầu 2 props cơ bản: datavà renderItem Trong đó:

  • data là dữ liệu để hiển thị lên list
  • renderItem là cách trình bày, màu, font, cỡ chữ trên ứng dụng

Ví dụ:

 

Nếu bạn muốn chia list hiển thị thành các nhóm khác nhau thì React Native cũng cung cấp cho bạn SectionList để làm việc này

Ví dụ:

 

Kết luận

Chúc bạn chạy được example mà không gặp phải lỗi nào nhé. Nếu có vấn đề gì thì bạn có thể comment dưới đây để mình support nhé

Nguồn tham khảo: https://facebook.github.io/react-native/docs/tutorial.html

TopDev via Viblo

SHARE