Đây là cách chúng tôi đạt được sự cân bằng giữa iOS và Android bằng React Native

Được sử dụng ứng dụng yêu thích của bạn trên iPhone và sau đó chuyển sang Android chỉ để thất vọng với triển vọng của ứng dụng của bạn? Chà, đây chính xác là những gì xảy ra khi các thành phần UI không giống nhau giữa các hệ điều hành. Cảm ơn Jordan Walke, một kỹ sư phần mềm của Facebook, người đã phân tích quá trình tiến bộ và thúc đẩy trải nghiệm người dùng thoải mái hơn để giải quyết vấn đề này với React Native.

Điều tốt nhất khi sử dụng React Native cho các ứng dụng di động là bạn có thể chia sẻ gần 95% cơ sở mã của mình trên cả hai nền tảng Android và iOS. Chúng tôi tại Pickyourtrail, yêu thích tính năng này, đó là lý do React Native là lựa chọn của chúng tôi để xây dựng ứng dụng di động.

Hiểu biết sâu sắc hơn về React Native

Mặc dù là một khung phát triển ứng dụng đa nền tảng, React Native sử dụng các thành phần bản gốc của Cameron trên cả iOS và Android để hiển thị giao diện người dùng ứng dụng. Điều này có nghĩa là cùng một thành phần có thể trông khác nhau trong mỗi nền tảng.

Để cho bạn rõ ràng hơn, hãy để Lừa lấy thành phần Nút làm ví dụ.

Đây là cách một nút trông trong cả iOS và Android:

Nút Ví dụ từ tài liệu React Native

Khá khác phải không?

Một số thành phần độc đáo đến mức React Native cần phân tách rõ ràng bằng cách sử dụng các tên thành phần khác nhau.

Giả sử, bạn muốn kết xuất trình chọn ngày, đối với iOS, bạn sẽ sử dụng thành phần DatePickerIOS để hiển thị chế độ xem mà bạn có thể chọn ngày. Giao diện người dùng này khá chuẩn trên thiết bị iOS và hầu hết mọi người đều sử dụng để chọn tùy chọn theo cách này.

DatePickerIOS từ Tài liệu gốc React

Tuy nhiên, trên Android, bộ chọn ngày chỉ có thể được sử dụng như một chức năng không đồng bộ DatePickerAndroid mở một cửa sổ bật lên khác nhau về cả chức năng và trải nghiệm người dùng.

DatePickerAndroid Chất liệu chọn ngày. Hình ảnh từ Vuescript

Tại sao chúng lại khác nhau như vậy?

Vâng, cả hai nền tảng Android và iOS đều được xây dựng trên các nguyên tắc thiết kế khác nhau và cung cấp trải nghiệm khác nhau cho người dùng. React Native về cơ bản là một giao diện cho phép bạn điều khiển các thành phần được xây dựng trên các nguyên tắc thiết kế đó.

Tuy nhiên, tại Pickyourtrail, chúng tôi cần người dùng cả ứng dụng Android và iOS của chúng tôi có cùng trải nghiệm trên cả hai nền tảng. Vì vậy, bây giờ chúng ta, để tạo ra các thành phần chung thống nhất cả hai nền tảng và tạo ra trải nghiệm độc đáo cho người dùng của chúng tôi!

Hãy bắt đầu với các thành phần Nút.

Thành phần nút tích hợp React Native cảm ứng sẽ hiển thị nút kiểu gốc. Tuy nhiên, chúng tôi có thể tạo một thành phần có thể nhấp tùy chỉnh bằng TouchableHighlight, sẽ đảm nhiệm hiển thị nút chung của chúng tôi trên cả hai nền tảng.

Bây giờ chúng ta có một thành phần CustomButton sẽ hiển thị nút độc lập với nền tảng trong ứng dụng của chúng ta. Tất cả chúng ta phải làm là sử dụng

Thành phần CustomButton hiển thị nút xem tương tự cho Android và iOS

Cần nhiều hơn?

Chúng tôi có thể sử dụng Đạo cụ React để chuyển theo kiểu tùy chỉnh cho thành phần CustomButton, điều này sẽ cho phép chúng tôi tạo ra nhiều thành phần theo chủ đề phù hợp hơn cho các ứng dụng của mình. Vì chúng tôi không sử dụng CSS trong React Native và tất cả các kiểu được viết trực tiếp bằng Javascript, chúng tôi có thể đạt được chức năng tương tự như các thành phần được tạo kiểu mà không phải sử dụng một thư viện riêng cho nó.

Thú vị đọc: Một cái nhìn vào thế giới LocalStorage!

Còn các thành phần như DatePicker thì sao?

Tuy nhiên, DatePickerIOS là một thành phần UI và DatePickerAndroid được triển khai dưới dạng cửa sổ bật lên, cách tiếp cận lý tưởng ở đây là sử dụng Modal cho Trình chọn ngày của iOS. Điều đó sẽ cho phép người dùng có trải nghiệm tương tự trong cả hai nền tảng. Một triển khai tốt của điều này có sẵn trong thành phần datepicker phản ứng.

Làm thế nào nó đi cho Pickyourtrail?

Bây giờ chúng tôi có một thư viện thành phần khổng lồ với các thành phần khác nhau theo chủ đề để đáp ứng nhu cầu của ứng dụng di động của chúng tôi và có thể dễ dàng sử dụng lại bất cứ nơi nào cần thiết. Thư viện thành phần đang phát triển nhanh chóng với các thành phần mới thú vị được thêm vào gần như mỗi ngày!

Nếu bạn có kế hoạch tiết kiệm thời gian bằng cách không tạo lại từng thành phần cho dự án của mình, bạn chỉ cần chọn một trong nhiều thư viện thành phần có sẵn cho React Native, chẳng hạn như NativeBase hoặc React Native Elements. Hãy cho chúng tôi biết trong phần bình luận bên dưới, nếu nó phù hợp với bạn!

Đọc nhanh: Đây là cách chúng tôi giải quyết tải trang chậm!

Tìm kiếm một nghỉ ngơi sau khi đọc một số công nghệ tốt? Đi và chơi xung quanh với sản phẩm Pickyourtrail của chúng tôi và bắt đầu lên kế hoạch cho kỳ nghỉ của bạn!

Về tác giả: Dani Akash, kỹ thuật viên của chúng tôi từ Pickyourtrail coi việc mã hóa cho điện thoại di động và máy chủ quá nghiêm trọng. Ngoài ra, anh chiến đấu với giấc ngủ với 10 giờ đọc Manga. Hà! Khá là chuyên gia, có phải là anh không?