Heim > Artikel > Web-Frontend > React Native Components CheatSheet

React Native Components CheatSheet

Barbara StreisandOriginal: 2024-10-17 06:26:29280Durchsuche

Hier finden Sie eine vollständige Anleitung für React Native-Komponenten, die HTML-Elementen entsprechen. Native Android- und iOS-UI-Komponenten können die Lücke zwischen Web- und mobiler Entwicklung schließen. Diese umfassende Tabelle bietet einen direkten Vergleich, um Entwicklern einen nahtlosen Übergang zwischen Plattformen zu ermöglichen.

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	(with custom handling)	RecyclerView	UITableView
SectionList	with sections	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	or <object> </td> <td>WebView</td> <td>WKWebView</td> </tr> <tr> <td><strong>Animated.View</strong></td> <td> <div> with animations</td> <td> Animated View </td> <td> UIView with animations</td> </tr> </tbody> </table></div> <p>Dies erleichtert allen neuen nativen Entwicklern den einfachen Übergang von der Web- oder Native-Entwicklung</p> <p><strong>Referenzen</strong>:</p> <ul> <li>Native Komponenten reagieren</li> <li>Android-Entwicklerreferenz</li> <li>Apple-Entwicklerdokumentation</li> </ul> <p>Das obige ist der detaillierte Inhalt vonReact Native Components CheatSheet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!</p></div><div class="nphpQianMsg"><a href="javascript:void(0);">css</a> <a href="javascript:void(0);">html</a> <a href="javascript:void(0);">Object</a> <a href="javascript:void(0);">switch</a> <a href="javascript:void(0);">for</a> <a href="javascript:void(0);">select</a> <a href="javascript:void(0);">checkbox</a> <a href="javascript:void(0);">this</a> <a href="javascript:void(0);">overflow</a> <a href="javascript:void(0);">transition</a> <a href="javascript:void(0);">input</a> <a href="javascript:void(0);">ul</a> <a href="javascript:void(0);">table</a> <a href="javascript:void(0);">android</a> <a href="javascript:void(0);">ios</a> <a href="javascript:void(0);">webview</a> <a href="javascript:void(0);">react native</a> <a href="javascript:void(0);">ui</a> <a href="javascript:void(0);">iframe</a><div class="clear"></div></div><div class="nphpQianSheng"><span>Stellungnahme：</span><div>Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn</div></div></div><div class="nphpSytBox"><span>Vorheriger Artikel：<a class="dBlack" title="Heben in JavaScript verstehen: Ein umfassender Leitfaden" href="http://m.php.cn/de/faq/1796632487.html">Heben in JavaScript verstehen: Ein umfassender Leitfaden</a></span><span>Nächster Artikel：<a class="dBlack" title="Heben in JavaScript verstehen: Ein umfassender Leitfaden" href="http://m.php.cn/de/faq/1796632491.html">Heben in JavaScript verstehen: Ein umfassender Leitfaden</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><em><a href="http://m.php.cn/de/article.html" class="bBlack"><i>Mehr sehen</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/de/faq/1609.html" title="Eine eingehende Analyse der Bootstrap-Listengruppenkomponente" class="aBlack">Eine eingehende Analyse der Bootstrap-Listengruppenkomponente</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/1640.html" title="Detaillierte Erläuterung des JavaScript-Funktions-Curryings" class="aBlack">Detaillierte Erläuterung des JavaScript-Funktions-Curryings</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/1949.html" title="Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)" class="aBlack">Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/2248.html" title="Angularjs integriert WeChat UI (weui)" class="aBlack">Angularjs integriert WeChat UI (weui)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/2351.html" title="Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse" class="aBlack">Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse</a><div class="clear"></div></li></ul></div></div><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！</p></div><div class="footermid"><a href="http://m.php.cn/de/about/us.html">Über uns</a><a href="http://m.php.cn/de/about/disclaimer.html">Haftungsausschluss</a><a href="http://m.php.cn/de/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times \|\| -1, //100次 _interval = interval \|\| 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 \|\| _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>