Trung BìnhReact Native iconReact Native

RN render thế nào trên iOS vs Android?

JS code không thay đổi giữa platform, nhưng layer dưới khác hẳn:

iOS: mỗi <View> map sang một UIView (Objective-C/Swift), <Text>RCTTextView/UILabel, <Image>RCTImageView/UIImageView. Layout dùng Yoga (cross-platform Flexbox engine của Meta), kết quả set frame cho UIView.

Android: <View> map sang ViewGroup hoặc View (Java/Kotlin), <Text>ReactTextView/TextView, <Image>ReactImageView. Cũng qua Yoga để compute layout, sau đó áp lên Android View hierarchy.

Hệ quả thực tế:
- Style giống nhau (cùng Yoga) → flex layout consistent cross-platform.
- Behaviour native khác: scrollbar style, text rendering (font hinting), shadow (iOS dùng shadow*, Android dùng elevation), borderRadius overflow trong <Image> từng có bug Android vài năm.
- Kích thước màn hình Dimensions.get('screen') trên Android có thể bao gồm system UI (status bar, navigation bar), trên iOS không — cần test cẩn thận.
- zIndex có phản ứng khác giữa hai platform; ưu tiên đổi thứ tự render thay vì lệ thuộc zIndex.

Xem toàn bộ React Native cùng filter theo level & chủ đề con.

Mở danh sách React Native