Cùng làm chức năng tương tự Messenger với React Native theo cách của bạn!

6885
làm Messenger với React Native

Hello các bạn, nhân tiện facebook ra thêm tính năng Dating và Secret Crush mình cũng thử cover lại app Messenger. của họ sử dụng React Native xem sao, và dưới đây là kết quả của mình.

Xem thêm các ứng dụng được viết bằng React Native.

Bài viết này tập chung về phía giao diện cho các bạn có cái nhìn chung trước nhé!

Oke bắt đầu, đầu tiên mình cần tạo 1 app:

  • react-native init MessengerRN

1. Khung chương trình

Ta tạo 1 thư mục App cho dễ quản lý nhé, đầu tiên cần phải sửa lại file index.js của project:

Ở trên mình có tạo ra 1 list item, và truyền từng Item sang 1 component khác cho dễ quản lý

Các bạn cũng thấy mình tách style ra làm một file riêng, các bạn cứ thử tưởng tượng về sau mình maintain 1 feature mà tất cả code trong 1 file xem sao, oải thật sự =)).

Mình cũng có tạo sẵn data cho chúng ta test rồi đây

  Hướng dẫn làm một app nghe nhạc online và offline đơn giản
  Hướng dẫn chi tiết tạo thanh Material Searchview và tích hợp lấy gợi ý tìm kiếm (Suggessquery) từ Google

Giờ hiển thị từng Item ra thôi, trước đó các bạn cài giúp mình 2 lib:

  • react-native install react-native-swipeout
  • react-native install react-native-vector-icons

react-native-swipeout là 1 lib hỗ trợ chúng ta có thể scroll sang trái, phải item.

react-native-vector-icons: là 1 lib hỗ trợ rất nhiều icon như: FontAwesome, IonIcons, MaterialIcons, AntDesign, … các bạn qua 2 docs này lib này để hiểu thêm nhé

thêm 1 chút style

Oke, giờ ta thử run nên và xem kết quả nào, và đây chúng ta đã có giao diện khá giống với Messenger.

2. Swipeout

Muốn sử dụng Swipeout ta cần bọc tất cả code trong nó:

Mình sẽ cấu hình tất cả trong swipeSettings

Mình giải thích 1 chút về phần left phía trên:

gồm có 1 button đó là: cameracallvideo, mỗi 1 {} là 1 button.

trong left có rất nhiều props như

  • component: ta có thể tạo component trong đó, truyền style thoải mái (Xem thêm component là gì?)
  • backgroundColor: set backgroundColor cho button đó.
  • onPress: tương tự như props của button

Và còn nhiều props hữu ích các bạn tham khảo trên Docs nhá.

À chút thì quên mình cần thêm 1 chút style nhá:

Các bạn thử run nên scroll Item sang bên trái nhé.

Tiếp theo chúng ta làm phần bên phải cũng tương tự với các button lần lượt là menunotifydelete:

Và kết quả đã gần giống với những gì chúng ta mong muốn rồi phải không? Các bạn có để ý trên Messenger khi giữ lâu 1 message thì message đó swipe sang bên phải không, mình cũng làm phần còn lại nhá.

Đơn giản bạn chỉ cần, thêm 1 props openRight có trong component root của lib, và check xem khi nào user giữ item 1 thời gian thì sẽ swipe sang bên phải

Bài viết này của mình xin kết thúc tại đây, Thank you for watching!!

Xem thêm việc làm Mobile Developer hot nhất trên TopDev

TopDev via viblo

  Làm hiệu ứng búng tay bay màu THANOS bằng Javascript
  Học React Native từ cơ bản đến nâng cao - Phần 1: Hướng dẫn cài đặt và chạy "Hello world"
SHARE