Những Component thường sử dụng(Phần 1)

``` import React from 'react'; import { View, Text, SafeAreaView } from 'react-native';

const WRAP = {
flexDirection: 'row',
height: 100,
padding: 20,
borderWidth: 1,
};

const BG_RED = {
backgroundColor: 'FF0000',
flex: 0.3,
};

const BG_BLUE = {
backgroundColor: 'blue',
flex: 0.5,
};

const App = () => {
return (




Hello World!


);
};

export default App;

    </div>
    <div style="width: 30%; margin-right: 10px;">
        <img src="https://user-images.githubusercontent.com/64763689/125737897-48485b87-85dc-434c-a17b-ab52e4c0fd08.png">
    </div>
</div>

##2.Text
Component hiển thị văn bản, hỗ trợ lồng văn bản, style và xử lý cảm ứng.
Props thường sử dụng:

- style - [TextStyle](https://reactnative.dev/docs/text-style-props) hoặc [ViewStyle](https://reactnative.dev/docs/view-style-props): là cách thể hiện của `Text`.

StyleProps thường sử dụng:

- margin - number: `View` được cách với phần bao bọc bên ngoài 1 khoảng.
- fontSize - number: cỡ chữ.
- fontWeight: 'normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900' - chỉ định độ đậm nhạt của font chữ.
- textAlign - 'auto', 'left', 'right', 'center', 'justify': căn chỉnh `Text` theo chiều ngang.
- textDecorationLine - 'none', 'underline', 'line-through', 'underline line-through': hiển thị 1 dòng kẻ bên dưới hoặc gạch ngang qua `Text`.

Đọc thêm về [Props](https://reactnative.dev/docs/text#props) của Text.

<div style="display:flex;width:100%;">
<div style="width: 70%;text-align: left;">

import React from "react";
import { Text } from "react-native";

const TEXT = {
fontSize: 16,
textAlign: "center",
}

const TEXT_RED = { color: "red" }

const App = () => {
return (

This is
{ Text Component }
in React Native

);
};

export default App;

    </div>
    <div style="width: 40%; margin-right: 10px;">
        <img src="https://user-images.githubusercontent.com/64763689/125599185-24867107-7c9a-458d-aeae-a077b29c0219.png">
    </div>
</div>

##3. Image
Component hiển thị hình ảnh, bao gồm hình ảnh mạng, tài nguyên tĩnh, hình ảnh cục bộ tạm thời và hình ảnh từ đĩa cục bộ, chẳng hạn như cuộn camera.

Props:

- style - [ImageStyleProps](https://reactnative.dev/docs/image-style-props): cách trình bày của Image.
- source: props bắt buộc phải có, là nguồn hình ảnh, có 2 loại:
  - Ảnh bằng đường dẫn từ xa, ví dụ: `source={{ uri: "https://source-image.com/image.png" }}`
  - Ảnh bằng đường dẫn cục bộ, ví dụ: `source={require("./image.png)}`
- resizeMode: là 1 trong những loại dưới đây:
  -  cover(mặc định): Chia tỷ lệ hình ảnh một cách đồng nhất (duy trì tỷ lệ co của hình ảnh) để cả hai kích thước (chiều rộng và chiều cao) của hình ảnh sẽ bằng hoặc lớn hơn kích thước tương ứng của chế độ xem.

  - contain: Chia tỷ lệ hình ảnh một cách đồng nhất (duy trì tỷ lệ co của hình ảnh) để cả hai kích thước (chiều rộng và chiều cao) của hình ảnh sẽ bằng hoặc nhỏ hơn kích thước tương ứng của chế độ xem.

  - stretch: Kéo giãn hình ảnh cho vừa bằng chiều cao và chiều rộng được đặt, làm thay đổi tỉ lệ co của ảnh.

  - repeat: Lặp lại hình ảnh để lấp đầy chế độ xem. Hình ảnh sẽ giữ nguyên kích thước và tỷ lệ co, trừ khi nó lớn hơn chế độ xem, trong trường hợp đó, nó sẽ được thu nhỏ một cách đồng nhất để nó được chứa trong chế độ xem.

  - center: Căn giữa hình ảnh trong chế độ xem dọc theo cả hai chiều. Nếu hình ảnh lớn hơn chế độ xem, hãy thu nhỏ đồng nhất để nó được chứa trong chế độ xem.

StyleProps:

- height - number: chiều cao của ảnh.
- width - number: chiều rộng của ảnh.
- tintColor - [color](https://reactnative.dev/docs/colors) : thay đổi các điểm ảnh không trong suốt thành màu của `tintColor`, thường dùng cho `Image` nhỏ làm icon.

***Lưu ý** :
GIF và WebP đều không được hỗ trợ mặc định trên Android mà cần phải thêm 1 số module vào `android/app/build.gradle`

dependencies {
// Nếu ứng dụng của bạn hỗ trợ các phiên bản Android trước Ice Cream Sandwich (API cấp 14)
implementation 'com.facebook.fresco:animated-base-support:1.3.0'

// Hỗ trợ GIF
implementation 'com.facebook.fresco:animated-gif:2.0.0'

// Hỗ trợ WebP
implementation 'com.facebook.fresco:animated-webp:2.1.0'
implementation 'com.facebook.fresco:webpsupport:2.0.0'

// Hỗ trợ WebP, không có hoạt ảnh
implementation 'com.facebook.fresco:webpsupport:2.0.0'
}

Đọc thêm về [Props](https://reactnative.dev/docs/image#props) của Image.

<div style="display:flex;width:100%;">
<div style="width: 70%;text-align: left;">

import React from 'react';
import {SafeAreaView, Image} from 'react-native';

const IMAGE = {
width: 300,
height: 200,
marginTop: 10,
};

const App = () => {
return (

<Image style={IMAGE} source={{ uri: 'https://blog.haposoft.com/content/images/2021/07/1_SkZWsG0Srr55ic6bJRpXsQ-1.jpeg' }} />
<Image style={IMAGE} source={require('./image.jpeg')} />

);
};

export default App;

    </div>
    <div style="width: 40%; margin-right: 10px;">
        <img src="https://user-images.githubusercontent.com/64763689/127614323-f73875c5-3c06-4997-adc3-0706b6b58305.png">
    </div>
</div>

##4. TouchableOpacity
Component bao bọc 1 hoặc nhiều Component khác, làm cho các lượt chạm có phản hồi.

Những Props thường sử dụng:

- style - [ViewStyle](https://reactnative.dev/docs/view-style-props): là cách thể hiện của `TouchableOpacity`.
- disabled - boolean: bật/tắt tương tác cho component này.
- onPress - () => void: hàm được gọi khi cảm ứng được thả ra.

Đọc thêm về [Props](https://reactnative.dev/docs/touchableopacity#touchablewithoutfeedback-props) của TouchableOpacity.

<div style="display:flex;width:100%;">
<div style="width: 70%;text-align: left;">

import React, { useState } from 'react';
import { Text, TouchableOpacity, View } from 'react-native';

const CONTAINER = {
flex: 1,
justifyContent: 'center',
paddingHorizontal: 10,
};

const WRAP_COUNT = {
alignItems: 'center',
padding: 10,
};

const BUTTON = {
alignItems: 'center',
backgroundColor: '#DDDDDD',
padding: 10,
};

const App = () => {
const [count, setCount] = useState(0);
const onPress = () => setCount(count + 1);

return (


Count: {count}


Press Here


);
};

export default App;

    </div>
    <div style="width: 40%; margin-right: 10px;">
        <img src="https://user-images.githubusercontent.com/64763689/125602171-d7f9a1fb-62be-4a06-aba0-4a565701472f.gif">
    </div>
</div>

##5. FlatList
Component hiển thị danh sách.

Những Props thường sử dụng:

- style/contentContainerStyle: [ViewStyle](https://reactnative.dev/docs/view-style-props): là cách thể hiện của `FlatList`.
- data(bắt buộc phải có): mảng dữ liệu sẽ dùng cho `renderItem`.
- renderItem(bắt buộc phải có): hàm lấy 1 mục từ `data` và hiển thị nó vào danh sách, thường sẽ nhận vào 2 tham số:
   - item: kiểu Object, là mục từ `data` được hiển thị.
   - index: kiểu Number, là chỉ số tương ứng với mục này trong `data`.
- refreshControl: là component [RefreshControl](https://reactnative.dev/docs/refreshcontrol), dùng khi muốn thực hiện hành động kéo để làm mới(pull to refresh)
- onEndReachedThreshold - number: ngưỡng tính bằng pixel, là khoảng cách từ phần cuối (tính theo đơn vị độ dài có thể nhìn thấy của danh sách), cạnh dưới cùng của danh sách phải cách phần cuối của nội dung, và kích hoạt sự kiện `onEndReached`.
- onEndReached - () => void: hàm được gọi khi cuộn đến `onEndReachedThreshold `.

Đọc thêm về [Props](https://reactnative.dev/docs/flatlist#props) của FlatList.

<div style="display:flex;width:100%;">
<div style="width: 70%;text-align: left;">

import React from 'react';
import { SafeAreaView, View, FlatList, Text } from 'react-native';

const CONTAINER = { flex: 1 };

const ITEM = {
backgroundColor: 'red',
padding: 10,
marginVertical: 5,
marginHorizontal: 15,
};

const TITLE = {
fontSize: 20,
color: 'white',
};

const DATA = [
{
id: '1',
title: 'Alpha',
},
{
id: '2',
title: 'Bravo',
},
{
id: '3',
title: 'Charlie',
},
{
id: '4',
title: 'Delta',
},
];

const App = () => {
const Item = ({ title }) => (

{title}

);

const renderItem = ({ item }) => ;

return (

<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={(item, index) => index + ''}
/>

);
};

export default App;

    </div>
    <div style="width: 40%; margin-right: 10px;">
        <img src="https://user-images.githubusercontent.com/64763689/125738072-25cc2a74-6b78-4c81-bd2c-68d6ca6d6b73.png">
    </div>
</div>

## Tổng kết
Trong bài viết này, mình cùng các bạn đi qua các component cơ bản nhất cũng như thường xuyên được sử dụng nhất trong React Native.

Hướng tới bài tiếp theo, mình sẽ giới thiệu những Component còn lại mình thường dùng trong dự án sử dụng React Native.