Bạn đặt padding chung trong nhánh native, rồi thêm riêng màu nền cho ios. Khi chạy iOS, padding không xuất hiện như dự đoán. Điểm dễ hiểu nhầm là Platform.select chọn một giá trị phù hợp, chứ không tự gộp object ở các nhánh thành một cấu hình cuối cùng.
Bài đối chiếu tài liệu React Native 0.88 và mã nguồn tag v0.88.0 ngày 08/11/2026. Ví dụ JSX được rà theo API; chưa chạy Metro, Hermes, build native, simulator hoặc kiểm tra giao diện trên thiết bị. Các kết quả dưới đây là điều cần quan sát khi chạy thử theo hợp đồng tài liệu.
Đọc thứ tự ưu tiên trên điện thoại
Theo Platform API, trên iOS và Android, nhánh đúng tên nền tảng được ưu tiên; nếu không có, chọn native, rồi đến default. Hướng dẫn code theo nền tảng cũng mô tả cách tổ chức khác biệt nhỏ bằng module Platform.
Ví dụ cấu hình chỉ có ios và native sẽ chọn ios trên iOS, native trên Android. Nếu bỏ native và không có android, Android sẽ nhận default nếu bạn cung cấp. Đừng đọc default như một object nền luôn được áp dụng trước mọi nhánh.
Giữ phần dùng chung bên ngoài select
Thử component này trong ứng dụng React Native đã thiết lập sẵn. Nó chỉ cần core components, không thêm package hoặc quyền hệ thống:
import React from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
const platformCard = Platform.select({
ios: {backgroundColor: '#e8f0ff'},
android: {backgroundColor: '#e7f5ed'},
native: {backgroundColor: '#f4ebff'},
default: {backgroundColor: '#eeeeee'},
});
const message = Platform.select({
ios: 'Nhánh iOS',
native: 'Nhánh native',
default: 'Nhánh default',
});
export default function PlatformCardDemo() {
return (
<View style={styles.screen}>
<View style={[styles.card, platformCard]}>
<Text style={styles.title}>{message}</Text>
<Text>Nền tảng hiện tại: {Platform.OS}</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
screen: {flex: 1, justifyContent: 'center', padding: 24},
card: {padding: 20, borderRadius: 12},
title: {fontSize: 20, marginBottom: 8},
});Padding và borderRadius luôn thuộc styles.card. Màu nền đến từ đúng một nhánh platformCard, rồi được áp dụng qua style array. Trên iOS, dòng tiêu đề dự định là “Nhánh iOS”; trên Android, vì message không có khóa android, tiêu đề dự định là “Nhánh native”. Hai lời gọi select có cấu hình riêng nên không nhất thiết cùng chọn một tên nhánh.
Chọn giá trị không phải trộn object
Giả sử bạn đưa {padding: 20} vào native, chỉ đưa {backgroundColor: ...} vào ios rồi dùng duy nhất kết quả select làm style. Khi nhánh ios được chọn, kết quả chỉ là object màu nền đó. Muốn có cả padding, giữ nó trong style chung như ví dụ hoặc tự xây dựng object đầy đủ cho nhánh.
Đây là quyết định tổ chức code, không phải một hứa hẹn rằng mọi style đều nên khác nhau theo OS. Trong màn hình thực tế, hãy bắt đầu từ bố cục chung; chỉ tách phần mà yêu cầu sản phẩm hoặc hành vi nền tảng thực sự cần khác biệt. Đổi màu ở bài này chỉ là tín hiệu giúp quan sát nhánh được chọn.
Có khóa nhưng giá trị undefined là trường hợp khác
Mã nguồn Platform iOS v0.88.0 và Platform Android v0.88.0 kiểm tra sự có mặt của khóa khi chọn nhánh. Vì vậy, một khóa ios được khai báo với giá trị undefined không tương đương việc bỏ hẳn khóa ấy để rơi xuống native.
Trong cấu hình do ứng dụng sinh động, tránh vô tình thêm khóa với undefined rồi mong có fallback. Hãy kiểm tra object đầu vào và nêu rõ nhánh nào thật sự được cung cấp. Bài chỉ đối chiếu implementation của tag đã nêu, không kiểm thử module trên runtime native.
Kiểm tra và giữ phạm vi gọn
Chạy màn hình trên cả iOS lẫn Android, kiểm tra dòng Platform.OS, dòng message và màu nền độc lập. Sau đó bỏ khóa android khỏi platformCard để kiểm tra fallback native; bỏ tiếp native để kiểm tra default. Giữ padding chung nguyên trạng trong mỗi ca để phát hiện việc vô tình chuyển nó vào nhánh.
Nếu khác biệt trở thành cả một component lớn, tài liệu còn hướng dẫn tách file .ios.js và .android.js. Với ví dụ nhỏ này, select đủ để thể hiện lựa chọn. Kết quả cần nhớ là một giá trị được chọn theo thứ tự, còn việc kết hợp cấu hình chung do code của bạn quyết định.
