21/11/2018, 23:45

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

Người viết: Trần Thành Nghĩa 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. 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 ...

Người viết: Trần Thành Nghĩa

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.

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 đó:

  • props: text trong Blink component
  • state: isShowingText 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ụ:

Techtalk via viblo.asia

Bài liên quan

Học React Native từ cơ bản đến nâng cao - Phần 9: Xây dựng App đọc tin tức đơn giản với React Native và 1 số chia sẻ cá nhân

Trong bài viết này tôi sẽ làm 1 demo để hướng dẫn cách sử dụng Boilerplate được đề cập trong Phần 8: Xây dựng Base Project (Boilerplate) cho React Native. Cho nên bài này tôi sẽ viết ngắn gọn để các bạn có thể bắt đầu đọc code ngay trong link dưới đây. Github: https://github.com/oTranThanh ...

Trịnh Tiến Mạnh viết 10:20 ngày 12/11/2019

Học React Native từ cơ bản đến nâng cao - Phần 8: Xây dựng Base Project (Boilerplate) cho React Native

Chào các bạn ! Trong bài viết ngày hôm nay tôi sẽ giới thiệu 1 React Native Boilerplate để các bạn dễ dàng áp dụng vào 1 dự án thực tế. Thực tế thì React Native Boilerplate này của tôi của chưa đầy đủ tất cả trường hợp nhưng trong thời gian tới tôi sẽ làm 1 ứng dụng dựa trên Boilerplate này ...

Trịnh Tiến Mạnh viết 10:11 ngày 11/10/2019

Học React Native từ cơ bản đến nâng cao - Phần 6: Giới thiệu AppCenter, CodePush và 1 số chia sẻ cá nhân

Lấy ví dụ 1 chút về Facebook nhé. Vào 1 ngày đẹp giời bạn mở app Facebook ra thấy design thay đổi và thấy thêm 1 số chức năng mới nhưng lạ 1 điều là bạn không hề cập nhật ứng dụng trên Google Play hay App Store. Rồi bạn thắc mắc "Có cách nào để làm như vậy không ?" Câu trả lời của tôi là ...

Tạ Quốc Bảo viết 08:54 ngày 05/08/2019

Học React Native từ cơ bản đến nâng cao - Phần 4: Gọi Native UI (Android) trong React Native

Trong bài viết này tôi sẽ giới thiệu với các bạn cách sử dụng Native UI trong React Native. Do không có nhiều thời gian nên tôi xin phép giới hạn bài này giành cho Android <img alt="

Bùi Văn Nam viết 10:16 ngày 20/07/2019

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

Người viết: Trần Thành Nghĩa 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. 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 ...

Vũ Văn Thanh viết 23:45 ngày 21/11/2018
0