Here is a complete guide for React Native components corresponding to HTML elements and native Android and iOS UI components can bridge the gap between web and mobile development. This comprehensive table provides a side-by-side comparison to help developers transition seamlessly across platforms.
React Native Component | HTML Element | Android Component | iOS Component |
---|---|---|---|
View | ViewGroup | UIView | |
Text |
or |
TextView | UILabel |
Image | ImageView | UIImageView | |
TextInput | EditText | UITextField | |
ScrollView | ScrollView | UIScrollView | |
FlatList |
|
RecyclerView | UITableView |
SectionList |
|
ExpandableListView | UITableView with sections |
Button | Button | UIButton | |
TouchableOpacity | Clickable |
TouchableOpacity | UIButton (with opacity) |
TouchableHighlight | Clickable |
TouchableHighlight | UIButton (with highlight effect) |
TouchableWithoutFeedback | Clickable |
View with touch events | UIView with touch events |
ActivityIndicator | CSS Spinner | ProgressBar | UIActivityIndicatorView |
Modal | Custom modal/dialog | Dialog | Modal UIViewController |
Picker | Spinner | UIPickerView | |
Switch | Switch | UISwitch | |
Slider | SeekBar | UISlider | |
StatusBar | N/A | StatusBar | UIStatusBar |
SafeAreaView | N/A | View (with insets) | UIView respecting safe areas |
KeyboardAvoidingView | N/A | View with keyboard handling | UIView with keyboard handling |
Pressable | View with touch events | UIView with touch events | |
RefreshControl | N/A | SwipeRefreshLayout | UIRefreshControl |
WebView | WebView | WKWebView | |
Animated.View |
with animations |
Animated View | UIView with animations |
This helps any new react native developers to easily transition from Web or Native development
References:
The above is the detailed content of React Native Components CheatSheet. For more information, please follow other related articles on the PHP Chinese website!