[React Native] Guide - Phần 1 - Handling Touches

Trong loạt series bài trước chúng ta đã được làm quen một cách cơ bản về lập trình đối với React Native. Và bây giờ chúng ta sẽ sang loạt series bài mới để đi sâu và chi tiết hơn về lập trình với Reat Native.

Loạt bài này là loạt bài hướng dẫn cách sử dụng, cách implement các thành phần mạnh mẽ đã được tạo dựng sẵn trong React Native.

Người dùng tương tác với các ứng dụng mobile chủ yếu thông qua các thao tác chạm. Họ có thể phối hợp đồng thời với cả các thao tác vuốt. Ví dụ như việc chạm vào một Button, scroll một list, hoặc zoom trên map.

React Native cung cấp các thành phần để điều khiển các thao tác chung và phổ biến như chạm, swipes, nó hoạt động tốt và toàn diện đối với tất cả các thao tác đã được thống kê thành chuẩn chung về các hành động trên màn hình cảm ứng. Bạn có thể tham khảo thêm trong phần gesture responder system.

Các thành phần có thể tap (Tappable Components)

Bạn có thể sử dụng các thành phần "Tappable" khi bạn muốn bắt một hành động tap trên màn hinh. Chúng ta có thể định nghĩa một function thông qua tham số onPress, nó sẽ được gọi đến khi bắt đầu có sự kiện chạm vào và kết thúc ở bên trong vùng bao quanh của thành phần quy định.

Ví dụ:

class MyButton extends Component {
  _onPressButton() {
    console.log("You tapped the button!");
  }

  render() {
    return (
      <TouchableHighlight onPress={this._onPressButton}>
        <Text>Button</Text>
      </TouchableHighlight>
    );
  }
}

Tappable components nên cung cấp phản hồi để thể thiện cho người dùng biết rằng component đang được chạm. Vậy điều gì sẽ xảy ra khi người dùng kéo điểm chạm ra khỏi vùng chúng ta quy định touch. Người dùng hoàn toàn có khả năng bỏ việc touch trên thành phần được quy định bằng cách giữ và kéo tay ra khỏi vùng của thành phần mà họ đã touch.

Thành phần bạn sử dụng sẽ phụ thuộc vào loại phản hồi bạn muốn cung cấp:

• Chung nhất, bạn có thể sử dụng TouchableHighlight bất cứ nơi nào bạn sẽ sử dụng một button hoặc liên kết trên web. Nền của chế độ xem sẽ được làm tối đi khi người dùng nhấn vào button.
• Bạn có thể xem xét sử dụng TouchableNativeFeedback trên Android để hiển thị gợn sóng như hiệu ứng mặc định với Material style để phản hồi với sự chạm của người dùng.
• TouchableOpacity có thể được sử dụng để cung cấp phản hồi bằng cách giảm độ mờ đục của button, cho phép nền được nhìn xuyên qua trong khi người dùng nhấn.
• Nếu bạn cần xử lý một hành động nhưng bạn không muốn người dùng thấy bất kỳ phản hồi nào được hiển thị, hãy sử dụng TouchableWithoutFeedback.

Long presses

Trong một số trường hợp, bạn có thể muốn detect hành động người dùng nhấn và giữ trên một views trong một khoảng thời gian. Đó là trường hợp Long presses, bạn có thể cài đặt điều này thông qua việc sử dụng thuộc tính onLongPress cho bất kỳ một touchable components nào.

Scrolling một lists và swiping các views

Một mô hình phổ biến cho nhiều ứng dụng trên điện thoại di động là danh sách các mục có thể scroll được. Người dùng tương tác với những điều này bằng cách sử dụng cử chỉ lướt hoặc vuốt. Thành phần ScrollView hiển thị một danh sách các mục có thể được cuộn bằng những cử chỉ này.

ScrollViews có thể scroll theo chiều dọc hoặc theo chiều ngang, và có thể được cấu hình để cho phép phân trang thông qua các chế độ xem bằng cách sử dụng các cử chỉ vuốt bằng cách sử dụng các pagingEnabled. Xoay ngang giữa các chế độ xem cũng có thể được triển khai trên Android bằng cách sử dụng thành phần ViewPagerAndroid.

Một ListView là một loại ScrollView đặc biệt phù hợp nhất để hiển thị các danh sách dài các mục. Nó cũng có thể hiển thị phần header và footers, tương tự như UITableViews trên iOS.

Pinch-to-zoom

Một ScrollView với một thành phần con có thể được sử dụng để cho phép người dùng phóng to nội dung. Thiết lập chế độ maximumZoomScale và minimumZoomScale và người dùng của bạn sẽ có thể sử dụng pinch và zoom để phóng to và thu nhỏ.

Các cơ chế điều khiển thêm các loại gestures khác.

Nếu bạn muốn cho phép người dùng kéo một thành phần view quanh màn hình hoặc bạn muốn thực hiện cử chỉ xoay / kéo tuỳ chỉnh của mình, hãy xem qua API của PanResponder hoặc tài liệu gesture responder system docs.

Nguồn tham khảo: Handling Touches