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

``` import React from 'react' import { SafeAreaView, TextInput } from 'react-native'

const INPUT = {
height: 40,
margin: 12,
borderWidth: 1,
paddingHorizontal: 10,
}

const App = () => {
const [email, onChangeEmail] = React.useState('')

return (



)
}

export default App

    </div>
    <div style="width: 40%; margin-right: 10px;">
        <img src="https://user-images.githubusercontent.com/64763689/125608015-b90e39dc-6395-46d8-9b77-ee665c21e627.gif">
    </div>
</div>

###7. KeyboardAvoidingView

Nó là một thành phần để giải quyết vấn đề phổ biến của các khung nhìn cần phải di chuyển ra khỏi cách của bàn phím ảo(ví dụ như khi focus vào 1 TextInput, bàn phím ảo sẽ hiện lên, đồng thời đẩy TextInput lên nếu nó nằm ở vị trí của bàn phím ảo). Nó có thể tự động điều chỉnh chiều cao, vị trí hoặc phần đệm dưới cùng dựa trên chiều cao bàn phím.

Props thường sử dụng:

- style - [ViewPropsStyle](): Cách hiển thị của `KeyboardAvoidingView`
- behavior - "height", "position", "padding": Cách hiển thị của bàn phím.

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

import React from 'react';
import { KeyboardAvoidingView, Platform, TextInput, View } from 'react-native';

const ROOT = { flex: 1 }

const INPUT = {
height: 40,
margin: 12,
borderWidth: 1,
paddingHorizontal: 10,
}

const App = () => {
const [value, onChangeValue] = React.useState('');

return (
<KeyboardAvoidingView
style={ROOT}
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>



)
}

export default App

    </div>
    <div style="width: 40%; margin-right: 10px;">
        <img src="https://user-images.githubusercontent.com/64763689/129588423-7cfb2e2c-f894-424c-8d33-00cd8ee66b85.gif">
    </div>
</div>

###8. Alert
Hiển thị một hộp thoại cảnh báo với tiêu đề và nội dung thông báo, ngoài ra còn cung cấp các nút, khi nhấn vào nút sẽ kích hoạt sự kiện `onPress` khiến đóng `Alert` và thực hiện 1 hành động.

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

import React from 'react'
import { SafeAreaView, Alert, TouchableOpacity, Text } from 'react-native'

const ROOT = {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}

const App = () => {
const onShowAlert = () =>
Alert.alert('Alert Title', 'My Alert Message', [
{
text: 'Cancel',
onPress: () => console.log('Cancel Pressed'),
style: 'cancel',
},
{ text: 'OK', onPress: () => console.log('OK Pressed') },
])

return (


Show Alert


)
}

export default App

    </div>
    <div style="width: 40%; margin-right: 10px;">
        <img src="https://user-images.githubusercontent.com/64763689/129583406-eb439c37-d368-437d-99f6-53cfe9a7930e.gif">
    </div>
</div>

###9. SafeAreaView

Mục đích của SafeAreaView là hiển thị nội dung trong ranh giới khu vực an toàn của thiết bị, cụ thể là dưới thanh StatusBar(gồm cả "tai thỏ") và phần phím cảm ứng trên 1 số thiết bị.

Props thường sử dụng là style - [ViewStyle](https://reactnative.dev/docs/view-style-props) và thường là `flex: 1` để bao toàn bộ màn hình, đồng thời có thể đặt màu nền cho nó bằng `backgroundColor` với màu tùy ý.

Lấy ví dụ ở phần `Alert` và xoá bỏ `SafeAreaView` đi, bạn sẽ thấy nút bị đè lên trên thanh `StatusBar`.

###Tổng kết.
Hy vọng qua 2 bài viết giới thiệu về các component cơ bản trong React Native, các bạn đã có cái nhìn tổng quan về các Component này, cách sử dụng và mục đích sử dụng của chúng.

Bài tiếp theo mình sẽ nói về Lifecycle của 1 Component trong React Native.