Rumah > Artikel > hujung hadapan web > Lembaran Cheat Komponen Asli Bertindak balas

Lembaran Cheat Komponen Asli Bertindak balas

Barbara Streisandasal: 2024-10-17 06:26:29280semak imbas

React Native Components CheatSheet

Berikut ialah panduan lengkap untuk komponen React Native yang sepadan dengan elemen HTML dan komponen UI Android dan iOS asli boleh merapatkan jurang antara pembangunan web dan mudah alih. Jadual komprehensif ini menyediakan perbandingan sebelah menyebelah untuk membantu pembangun beralih dengan lancar merentas platform.

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>Ini membantu mana-mana pembangun asli bertindak balas baharu untuk beralih dengan mudah daripada pembangunan Web atau Asli</p> <p><strong>Rujukan</strong>:</p> <ul> <li>Komponen Asli Bertindak Balas</li> <li>Rujukan Pembangun Android</li> <li>Dokumentasi Pembangun Apple</li> </ul> <p>Atas ialah kandungan terperinci Lembaran Cheat Komponen Asli Bertindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!</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>Kenyataan：</span><div>Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn</div></div></div><div class="nphpSytBox"><span>Artikel sebelumnya：<a class="dBlack" title="Memahami Hoisting dalam JavaScript: Panduan Komprehensif" href="http://m.php.cn/ms/faq/1796632487.html">Memahami Hoisting dalam JavaScript: Panduan Komprehensif</a></span><span>Artikel seterusnya：<a class="dBlack" title="Memahami Hoisting dalam JavaScript: Panduan Komprehensif" href="http://m.php.cn/ms/faq/1796632491.html">Memahami Hoisting dalam JavaScript: Panduan Komprehensif</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Artikel berkaitan</h2><em><a href="http://m.php.cn/ms/article.html" class="bBlack"><i>Lihat lagi</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ms/faq/1609.html" title="Analisis mendalam bagi komponen kumpulan senarai Bootstrap" class="aBlack">Analisis mendalam bagi komponen kumpulan senarai Bootstrap</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/1640.html" title="Penjelasan terperinci tentang fungsi JavaScript kari" class="aBlack">Penjelasan terperinci tentang fungsi JavaScript kari</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/1949.html" title="Contoh lengkap penjanaan kata laluan JS dan pengesanan kekuatan (dengan muat turun kod sumber demo)" class="aBlack">Contoh lengkap penjanaan kata laluan JS dan pengesanan kekuatan (dengan muat turun kod sumber demo)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/2248.html" title="Angularjs menyepadukan UI WeChat (weui)" class="aBlack">Angularjs menyepadukan UI WeChat (weui)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/2351.html" title="Cara cepat bertukar antara Cina Tradisional dan Cina Ringkas dengan JavaScript dan helah untuk tapak web menyokong pertukaran antara kemahiran_javascript Cina Ringkas dan Tradisional" class="aBlack">Cara cepat bertukar antara Cina Tradisional dan Cina Ringkas dengan JavaScript dan helah untuk tapak web menyokong pertukaran antara kemahiran_javascript Cina Ringkas dan Tradisional</a><div class="clear"></div></li></ul></div></div><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！</p></div><div class="footermid"><a href="http://m.php.cn/ms/about/us.html">Tentang kita</a><a href="http://m.php.cn/ms/about/disclaimer.html">Penafian</a><a href="http://m.php.cn/ms/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>