Bài 5 : Button, TextInput ReactNative
Chào các em, để tiếp tục series React native cơ bản, hôm nay chúng ta tìm hiểu 2 Component cơ bản là Button và InputText
- Button trong React Native
Button là 1 trong các Component cơ bản trong React Native dùng để hiển thị các ‘nút ấn’, React Native cung cấp hạn chế việc tùy biến giao diện của Button


Để sử dụng Button chúng ta cần khai báo thẻ <Button/> và tối thiểu 2 tham số props là onPress và title
onPress : là props khai báo hàm cho sự kiện người dùng nhấn vào button
title : là tiêu đề cho button or tên hiển thị của button
color : là màu của chữ (iOS) và là màu của background button (Android)
Như vậy nếu các em muốn giao diện của button giống nhau khi chạy trên cả iOS và Android thì cần tự viết 1 Component thay vì dùng Button.
accessibilityLabel : hiển thị nội dung giải thích chức năng nếu thiết bị hỗ trợ hoặc đăng mở chức năng dành cho người khiếm thị
Có 2 cách để viết sự kiện cho Button.
<Button title= 'Delete' onPress = {() => {
}}
/>
Viết câu lệnh trực tiếp trong onPress
<Button title= 'Delete' onPress = {onDelete}
/>
gọi phương thức trong hàm onPress
Các thuộc tính (props) khác trong Button
disabled : Nếu thuộc tính = true thì sẽ tắt hàm onPress của button
- TextInput trong React Native
Textinput là component trong React native dùng để nhập dữ liệu từ bàn phím .TextInput cung cấp các props để tùy biến các chức năng như auto-correction (tự động sửa lỗi chữ), auto-capitalization(tự động viết hoa ), placeholder text(chữ gợi ý), và các loại bàn phím ảo khác nhau ví dụ như bàn phím số. Để sử dụng TextInput ta cùng xem ví dụ sau :
constructor(props) {
super(props);
this.state = { text: 'Useless Placeholder' };
}
render() {
return (
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
onChangeText={(text) => this.setState({text})}
value={this.state.text}
/>
);
}
Các props cơ bản trong TextInput
defaultValue : khai báo sẵn giá trị nhập cho TextInput
placeholder : hiển thị dòng chữ gợi ý cho TextInput
maxLength : độ dài tối đa được nhập vào TextInput
numberOfLines : số dòng tối đa hiển thị nếu TextInput được nhập nhiều ký tự
secureTextEntry : hiển thị chữ dạng mật khẩu . giá trị = true
onChange : hàm được gọi khi người dùng nhập, thay đổi text từ bàn phím
onChangeText : tương tự như hàm onChange nhưng giá trị text được truyền vào hàm onChangeText
value : giá trị của text được nhập vào TextInput
Bài tập thực hành : Xây dựng màn hình login để người dùng nhập username và password. Khi người dùng ấn vào button login sẽ hiển thị ra giá trị text đã nhập. Giao diện bài tập như sau :

Như vậy, chúng ta đã tìm hiểu cơ bản về 2 component trong React Native là Button và TextInput. Mọi thắc mắc về bài học và bài tập mọi người bình luận tại đây nhé. Chúc các em 1 ngày làm việc vui vẻ