How to handle multiple platforms in React native?

Writing Cross-Platform Apps with React Native

Phần lớn các API React Native chạy trên đa nền tảng, vì vậy chỉ cần viết ra một component nó sẽ hoạt động trơn tru trên cả iOS và Android.

Chính Facebook đã truyên bố là ứng dụng Trình quản lý quảng cáo của họ có 87% các đoạn code sử dụng chạy trên cả hai nền tảng. Điều này có thể khẳng định rằng, nếu như không có thiết kế riêng cho từng hệ điều hành iOS hay Android thì gần như cách sử lý code trong các component của chúng ta là như nhau.

Vậy trong trường hợp phải xử lý riêng cho từng hệ điều hành thì sao, dưới đây là một số cách tôi đã sử dụng trong các dự án của mình.

Sử dụng Platform

Platform là một API theo mình nghĩ là thích hợp nhất cho việc xử lý đa nền tảng. Giả sử ta cần hiển thị hai đoạn chuỗi khách nhau trên iOS và Android, ta có thể làm như sau:

react native platform

Trong trường hợp ta cần thay đổi thuộc tính style, ta có thể sử dụng hàm Platform.select như hình minh hoạ dưới:

react native platform

Và cách cuối cùng đó chính là tạo ra các file mở rộng cho từng nền tảng. React Native sẽ kiểm tra nếu như có các đuôi file mở rộng như .ios. hoặc .android. và tải lên đúng file đó theo hệ điều hành đang sử dụng.

Ví dụ ta có một component Button, ta sẽ tạo ra hai file:

Button.ios.js
Button.android.js

Và khi sử dụng chỉ cần import như sau:

import Button from ‘./Button’;

Vậy là mình vừa đi qua một số cách để ta có thể quản lý các component hoặc các file chạy được trên đa nền tảng. Hy vọng bài viết sẽ giúp ích cho các bạn.

Cảm ơn mọi người!