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ẻ