Gần đây tôi đã chuyển công việc và một trong những nhiệm vụ đầu tiên của tôi là tạo một trang dưới cùng trong React Native.
Xuất thân từ nền tảng phát triển Android gốc, tôi nghĩ rằng nó sẽ khó khăn như việc tạo trang dưới cùng trong bản gốc. Nhưng tôi đã lầm! Tôi bị mê hoặc đến mức quyết định viết một hướng dẫn đơn giản về cách tạo trang tính dưới cùng trong React Native.
Trang tính dưới cùng là một thành phần hữu ích trượt lên từ cuối màn hình và thường chứa các tùy chọn khác nhau. Nó rất phổ biến trong thiết kế hiện đại và được sử dụng bởi các ứng dụng như Uber, Zomato và nhiều ứng dụng khác.
Đây là kết quả cuối cùng sẽ như thế nào:
Vì vậy, hãy xem cách tạo trang dưới cùng trong React Native.
Bắt đầu
Đầu tiên, tạo một dự án mới trong React Native. Tôi đang sử dụng expo-cli cho việc này. Nếu bạn chưa biết về expo-cli hoặc mới bắt đầu với React Native, hãy xem liên kết này.
Tôi đã đặt tên cho dự án của mình là BottomSheetDemo.
Tiếp theo, chúng tôi sẽ cần cài đặt react-native-modalbox. Điều này cung cấp cho chúng tôi nhiều khả năng có sẵn như hoạt ảnh, vị trí, phông nền, v.v.
$ expo install react-native-modalbox@1.7.1
Lưu ý:Nhớ cài đặt phiên bản 1.7.1. Phiên bản mới nhất có lỗi trong đó backdropPressToClose không hoạt động.
Tạo phương thức
Đã đến lúc tạo phương thức của chúng tôi. Xóa mã mà bạn được cung cấp lúc đầu và thêm mã sau vào tệp App.js của bạn:
Đây là phần cốt lõi của trang tính / phương thức dưới cùng của chúng tôi. Chúng tôi sẽ chỉ hiển thị ở văn bản ở trung tâm của phương thức.
Thêm tương tác
Chúng ta cần trang dưới cùng hiển thị khi nhấn một nút. Hãy thêm một số tương tác.
Tôi sẽ thêm một nút đơn giản vào giữa màn hình:
Khi nhấp vào nút này, chúng ta cần hiển thị / ẩn trang tính dưới cùng của mình. Để thực hiện việc này, chúng tôi sẽ duy trì trạng thái bằng hook useState React.
Phương thức của chúng tôi có một chỗ dựa tên là “isOpen” mà chúng tôi có thể chuyển đổi để hiển thị / ẩn trang dưới cùng của chúng tôi. Để hiển thị nó, chúng tôi sẽ chỉ cần đặt modalVible thành false và ngược lại.
Nhưng trước tiên, hãy tách phương thức của chúng ta khỏi phần còn lại của mã vì nó bắt đầu hơi lộn xộn. Tôi sẽ tạo một hàm riêng biệt sẽ trả về phương thức của tôi.
Bây giờ mã trông sạch hơn nhiều. Nhưng trang dưới cùng của chúng tôi vẫn không giống hệt như trang dưới cùng. Chúng tôi cần thêm một số kiểu.
Hãy thêm một số kiểu tạo kiểu!
Tạo một biểu định kiểu và thêm các kiểu sau vào đó:
Đây là mã cuối cùng trông như thế nào:
Cuối cùng thì chúng tôi cũng đã tạo được trang dưới cùng của mình trong React Native. Nó rất đơn giản và dễ tạo hơn nhiều so với Android gốc.
Tôi không thể nhận xét về iOS vì tôi chưa bao giờ thử điều đó.
Vì vậy, nếu bạn là nhà phát triển iOS hoặc có kinh nghiệm tạo trang dưới cùng trong iOS, hãy cho tôi biết trải nghiệm của bạn.
Tham gia không gian làm việc AndroidVille SLACK dành cho nhà phát triển thiết bị di động, nơi mọi người chia sẻ kiến thức của họ về công nghệ mới nhất, đặc biệt là Phát triển Android, RxJava, Kotlin, Flutter và phát triển di động nói chung.
Nhấp vào liên kết này để tham gia không gian làm việc. Nó hoàn toàn miễn phí.
Thích những gì bạn đọc? Đừng quên chia sẻ bài đăng này trên Facebook, Whatsapp và LinkedIn .
Bạn có thể theo dõi tôi trên LinkedIn, Quora, Twitter và Instagram, nơi tôi trả lời các câu hỏi liên quan đến Phát triển di động, đặc biệt là Android và Flutter.