TÌM HIỂU VỀ PROPS - CÁC CONTROL LISTVIEW

Hướng dẫn thực hiện: Trương Tấn Khải - www.cybersoft.edu.vn

 ✦Props (Truyền dữ liệu từ component cha vào con
• Props là gì ?
- Props là thuộc tính của thẻ (Ta có thể hiểu prop là property của thẻ ). Ví dụ thẻ <TextInput> bên dưới
ta có các props style, value, placeholder … Khi ta truyền hoặc thay đổi giá trị của các thuộc tính này
thì giao diện sẽ thay đổi.

• Props đối với component

- Props là thuộc tính mặc định của component để nhận dữ liệu từ các giá trị component cha
- truyền vào => Để binding dữ liệu ra component con tại html tương ứng
- Props của component chỉ nhận các thuộc tính được truyền vào từ component cha của nó và không thể bị
chỉnh sửa bên trong component
- Đối với stateful và stateless component có các cách sử dụng props khác nhau.
- Props khác state ở chổ Props, props readonly chúng ta không thể thay đổi giá trị của props trong component
chứa nó.
Hướng dẫn thực hiện: Trương Tấn Khải - www.cybersoft.edu.vn
 ✦Sử dụng Props trong component
• Stateless component (RNf - react native functional)
- Đối với react functional thì tham số truyền vào dưới dạng thuộc tính của thẻ, vào trong phần component
nhận giá trị tham số được chứa trong biến props (tham số đầu vào của component con). => Từ đó sử dụng
tham số binding giá trị như bình thường (qua 2 dấu {})
Coponent App sử dụng thẻ <Header> Component app là cha component Header là con

Component <Header> nhận giá trị

Hướng dẫn thực hiện: Trương Tấn Khải - www.cybersoft.edu.vn

 ✦Sử dụng Props trong component
• Stateful component (RNC - react native functional)
- Đối với react class component về mặc truyền tham số từ compent cha cũng tương tự RNF. Tuy nhiên tại
component con vì là class nên sẽ không có tham số truyền vào, nên sẽ nhận thông qua thuộc tính là props.

- Nhận giá trị title thông qua thuộc tính this.props.title

Hướng dẫn thực hiện: Trương Tấn Khải - www.cybersoft.edu.vn

 ✦TÌM HIỂU 1 SỐ CONTROL LIST VIEW

‣ FlatList

‣SectionList

‣ ScrollView

Hướng dẫn thực hiện: Trương Tấn Khải - www.cybersoft.edu.vn

 ❖ FlatList
- Việc bố cục layout không hề đơn giãn với react-native, như các bạn đã thấy việc ngồi customStyle để hiển thị
danh sách, danh mục các item rất chi là mất thời gian, vì vậy react-native cung cấp cho ta 1 control để hiển thị
data mảng dữ liệu giúp ta dễ dàng tinh chỉnh giao diện hơn rút ngắn thời gian lại.
- FlatList là một component để render một list data, nó không chỉ hiệu quả mà còn có một API cực kì đơn giản
để sử dụng.

THUỘC TÍNH GIÁ TRỊ Ý NGHĨA

data - arrayObject - Nhận vào 1 mảng dữ liệu để render

renderItem - Function - Nhận vào 1 hàm(callBackF) render giống hàm .map([callbackF]) es6.

keyExtractor - keyExtractor - Key để xác định khóa duy nhất cho mỗi phần tử.

horizontal - true, false - Sắp xếp phần tử theo chiều ngang (nếu true).

numColumns - number -Xác định số cột cho mỗi dòng.

Hướng dẫn thực hiện: Trương Tấn Khải - www.cybersoft.edu.vn

 ❖ FlatList Sử dụng component Flaglist từ thư viện
Và component Item (Do ta tự định nghĩa)
Component item

Component item nhận vào 1 props là item =>

xử lý render nội dung bên component đó

Sử dụng 1 số thuộc tính của component Flatlist trong đó 2 thuộc tính

RenderItem: render nội dung lặp tương tự hàm map

Hướng dẫn thực hiện: Trương Tấn Khải - www.cybersoft.edu.vn

 ❖ SectionList
- SectionList là component cho phép render một danh sách dữ liệu theo nhóm.

THUỘC TÍNH GIÁ TRỊ Ý NGHĨA

sections - arrayObject - Nhận vào 1 mảng dữ liệu để render

- Hàm sử dụng để render nội dung ở Header mỗi section. Với

renderSectionHeader - callBackFunc({section})
input là item trong phần data của section

renderSectionFooter - callBackFunc({section}) - Key để xác định khóa duy nhất cho mỗi phần tử.

-Hàm sử dụng để render các phần tử của mảng dữ liệu

renderItem - callBackFunc({item})
trong mỗi nhóm.

-Xác định số cột cho mỗi dòng.

keyExtractor - number

-Hàm sử dụng để vẽ đường line dưới mỗi

ItemSeparatorComponent - callBackFunc(sectiondata)
phần tử.

Hướng dẫn thực hiện: Trương Tấn Khải - www.cybersoft.edu.vn

 ❖ SectionList
const array = [
{
"title": "Thông tin tài khoản",
"data": [
{ "id": "1", "name": "Hồ sơ cá nhân" },
{ "id": "2", "name": "Đổi mật khẩu" },
]
},
{
"title": "Thông tin liên hệ",
"data": [
{ "id": "3", "name": "Bạn bè" },
{ "id": "4", "name": "Nhóm" },
{ "id": "5", "name": "Kỷ niệm" },
{ "id": "6", "name": "Tìm kiếm quanh đây" },
{ "id": "7", "name": "Hẹn hò" },
],
},
{
"title": "Cài đặt",
"data": [
{ "id": "8", "name": "Trợ giúp" },
{ "id": "9", "name": "Cài đặt & quyền riêng tư" },
{ "id": "10", "name": "Điều khoản chính sách" },

],
},
]

Hướng dẫn thực hiện: Trương Tấn Khải - www.cybersoft.edu.vn

 - CustomStyle cho component SectionList

Hướng dẫn thực hiện: Trương Tấn Khải - www.cybersoft.edu.vn

 ❖ Cài đặt react-native-vector icon
npm install --save react-native-vector-icons

✦ Sử dụng icon
• Tham khảo document: https://github.com/oblador/react-native-vector-icons

• Sau khi cài đặt ta import 1 trong các thư viện font icon sau và sử dụng như
đoạn lệnh bên dưới
<Icon name='stepbackward' size={30} />

• Trang tham khảo icon từ các font chữ

https://oblador.github.io/react-native-vector-icons/

Hướng dẫn thực hiện: Trương Tấn Khải - www.cybersoft.edu.vn

 ❖ ScrollView
• ScrollView là component giúp cuộn các thành phần trong màn hình để hiển thị hết nội
dung khi độ dài (rộng) của nó vượt quá kích thước của màn hình.
• ScrollView cho phép cuộn các thành phần theo cả chiều dọc và chiều ngang.
• Theo mặc định ScrollView cuộn các thành phần chiều dọc.

THUỘC TÍNH GIÁ TRỊ Ý NGHĨA

• interactive - interactive: Bàn phím sẽ trượt dần xuống khi scroll

keyboardDismissMode • none - none: Bàn phím vẫn hiển thị khi scroll
• on-drag - on-drag: Bàn phím sẽ ẩn đi khi scroll

contentContainerStyle - Style - Style cho ScrollView.

horizontal - keyExtractor - Scroll theo chiều ngang.

pagingEnabled - true, false - Cho phép lật trang (theo chiều ngang).

onMomentumScrollBegin - callbackFunction - Hàm xử lý sự kiện khi bắt đầu scroll.

onMomentumScrollEnd -callbackFunction - Hàm xử lý sự kiện khi kết thúc scroll.

- Hàm xử lý sự kiện khi đang scroll, hàm này nhận vào một
onScroll -callbackFunction
tham số là event ( thường dùng để lấy tọa độ phần tử scroll ).
scrollEventThrottle -number -Thời gian bao lâu thì tọa độ update một lần (ms).

Hướng dẫn thực hiện: Trương Tấn Khải - www.cybersoft.edu.vn

 ❖ Ứng dụng scrollView

Hướng dẫn thực hiện: Trương Tấn Khải - www.cybersoft.edu.vn

 ❖ Ứng dụng scrollview làm màn hình zalo kết bạn
• Sử dụng flex + easy grid chia layout
• Dùng scrollview để tạo giao diện
• Thực hiện hàm map để lặp dữ liệu
• Cung cấp cho các bạn tài nguyên hình ảnh (lưu ý hình bên dưới
đường dẫn các bạn tự cấu hình lại) =>
let { wanda, captain, flash, tony, petter, strange, kara, diana, yasuo, natasha } = {
wanda: require('../assets/hero/wanda.jpg'),
captain: require('../assets/hero/captain.jpg'),
flash: require('../assets/hero/flash.jpg'),
tony: require('../assets/hero/ironman.jpeg'),
petter: require('../assets/hero/spiderman.jpeg'),
strange: require('../assets/hero/strange.jpg'),
kara: require('../assets/hero/suppergirl.jpg'),
diana: require('../assets/hero/wonderwoman.jpg'),
yasuo: require('../assets/hero/yasuo.jpg'),
natasha: require('../assets/hero/blackwidow.jpeg'),
}
let userList = [
{ name: 'wanda', avatar: wanda },
{ name: 'yasuo', avatar: yasuo },
{ name: 'captain', avatar: captain },
{ name: 'flash', avatar: flash },
{ name: 'tony', avatar: tony },
{ name: 'petter', avatar: petter },
]
let userSuggestions = [
{ name: 'strange', avatar: strange },
{ name: 'kara', avatar: kara },
{ name: 'diana', avatar: diana },
{ name: 'natasha', avatar: natasha },
{ name: 'strange', avatar: strange },
{ name: 'kara', avatar: kara },
{ name: 'diana', avatar: diana },
{ name: 'natasha', avatar: natasha },
{ name: 'strange', avatar: strange },
{ name: 'kara', avatar: kara },
{ name: 'diana', avatar: diana },
{ name: 'natasha', avatar: natasha },
]

Hướng dẫn thực hiện: Trương Tấn Khải - www.cybersoft.edu.vn