{"id":38331,"date":"2023-03-18T02:28:59","date_gmt":"2022-11-07T21:41:25","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%b8%80%e4%bd%8dreact%e5%b7%a5%e7%a8%8b%e5%b8%88%e4%bd%93%e9%aa%8c%e4%bd%bf%e7%94%a8react-native\/"},"modified":"2024-04-29T19:23:07","modified_gmt":"2024-04-29T11:23:07","slug":"%e4%b8%80%e4%bd%8dreact%e5%b7%a5%e7%a8%8b%e5%b8%88%e4%bd%93%e9%aa%8c%e4%bd%bf%e7%94%a8react-native","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%b8%80%e4%bd%8dreact%e5%b7%a5%e7%a8%8b%e5%b8%88%e4%bd%93%e9%aa%8c%e4%bd%bf%e7%94%a8react-native\/","title":{"rendered":"\u4e00\u4f4dReact\u5de5\u7a0b\u5e08\u4f53\u9a8c\u4f7f\u7528React Native"},"content":{"rendered":"<h1>\u9996\u5148<\/h1>\n<p>\u6211\u6700\u521d\u4f7f\u7528React\u8fdb\u884cweb\u5f00\u53d1\uff0c\u4f46\u73b0\u5728\u5f00\u59cb\u6d89\u8db3\u4f7f\u7528React Native\u8fdb\u884c\u79fb\u52a8\u7aef\u5f00\u53d1\u3002\u4f5c\u4e3a\u4e00\u4e2a\u4e4b\u524d\u4f7f\u7528React\u7684\u4eba\uff0c\u6211\u60f3\u5206\u4eab\u4e00\u4e0b\u5b66\u4e60React Native\u7684\u611f\u53d7\u3002\u672c\u6587\u5c06\u53c2\u8003React Native\u5b98\u65b9\u6587\u6863[1]\u6765\u8fdb\u884c\u4e66\u5199\u3002<\/p>\n<h1>\u524d\u63d0 t\u00ed) &#8211; precondition\/assumption<\/h1>\n<p>\u53ef\u4ee5\u4f7f\u7528React<br \/>\n\u53ef\u4ee5\u4f7f\u7528TypeScript<br \/>\n\u662f\u7b2c\u4e00\u6b21\u4f7f\u7528\u79fb\u52a8\u7aef<\/p>\n<p>\u5982\u679c\u4f60\u60f3\u4e86\u89e3\u73af\u5883\u642d\u5efa\u548c\u7b80\u5355\u7684\u64cd\u4f5c\u786e\u8ba4\uff0c\u8bf7\u53c2\u8003\u4e0a\u4e00\u7bc7\u6587\u7ae0[1]\u3002<\/p>\n<h1>React Native\u7684\u91cd\u8981\u6027<\/h1>\n<p>\u73b0\u5728\u79fb\u52a8\u8bbe\u5907\u4e0a\u7684\u64cd\u4f5c\u7cfb\u7edf\u4e3b\u8981\u5206\u4e3aAndroid\u548ciOS\uff0c\u800c\u4e14\u5b83\u4eec\u5404\u81ea\u6240\u4f7f\u7528\u7684\u7f16\u7a0b\u8bed\u8a00\u4e5f\u4e0d\u540c\u3002\u8fc7\u53bb\uff0ciOS\u4e3b\u8981\u4f7f\u7528Objective-C\uff0c\u800cAndroid\u4e3b\u8981\u4f7f\u7528Java\u3002\u7136\u800c\uff0c\u6700\u8fd1\uff0ciOS\u5f00\u59cb\u4f7f\u7528Swift\uff0c\u800cAndroid\u5219\u4f7f\u7528Kotlin\uff0c\u8fd9\u610f\u5473\u7740\u53ef\u80fd\u5b58\u5728\u6700\u591a\u56db\u79cd\u4e0d\u540c\u7684\u4ee3\u7801\u3002\u663e\u7136\uff0c\u4ece\u5f00\u53d1\u6548\u7387\u7684\u89d2\u5ea6\u6765\u770b\uff0c\u8fd9\u662f\u4e0d\u7406\u60f3\u7684\u3002\u4e3a\u4e86\u89e3\u51b3\u8fd9\u4e2a\u95ee\u9898\uff0c\u4e00\u4e9b\u8de8\u5e73\u53f0\u5f00\u53d1\u6846\u67b6\u5982React Native\u5df2\u7ecf\u88ab\u5f00\u53d1\u51fa\u6765\u3002<\/p>\n<h1>\u5fc5\u987b\u4f7f\u7528React Native\u5417\uff1f<\/h1>\n<p>\u8fd1\u5e74\u6709\u4e00\u500b\u5e38\u88ab\u6bd4\u8f03\u7684\u6846\u67b6\u662fFlutter\u3002\u4e00\u822c\u5e38\u6709\u4e00\u7a2e\u8a0e\u8ad6\u53eb\u505a\u300cFlutter vs React Native\u300d\uff0c\u4f46\u5f9e\u958b\u767c\u6210\u672c\u7684\u89d2\u5ea6\u4f86\u770b\uff0c\u76f8\u6bd4Flutter\uff0cReact Native\u660e\u986f\u66f4\u6709\u6548\u7387\u3002\u5728Flutter\u4e2d\u9700\u8981\u5b78\u7fd2\u4e00\u500b\u65b0\u7684\u8a9e\u8a00Dart\uff0c\u5b78\u7fd2\u6210\u672c\u8f03\u9ad8\uff0c\u800cReact Native\u5247\u53ef\u4ee5\u5229\u7528React\u7684\u77e5\u8b58\u9032\u884c\u958b\u767c\uff0c\u5b78\u7fd2\u6210\u672c\u76f8\u5c0d\u8f03\u4f4e\u3002\u5f9e\u6027\u80fd\u89d2\u5ea6\u4f86\u770b\uff0cFlutter\u53ef\u80fd\u66f4\u597d\uff0c\u4f46\u5982\u679c\u5c0d\u6027\u80fd\u8981\u6c42\u4e0d\u9ad8\u7684\u8a71\uff0c\u4f7f\u7528React Native\u66f4\u65b9\u4fbf\u5feb\u6377\u3002\u4f46\u9700\u8981\u6ce8\u610f\u7684\u662f\uff0c\u96d6\u7136React Native\u53ef\u4ee5\u76f4\u63a5\u4f7f\u7528\uff0c\u4f46\u9084\u662f\u9700\u8981\u5b78\u7fd2\u4e00\u4e9b\u57fa\u672c\u77e5\u8b58\u3002<\/p>\n<p>\u6211\u60f3\u4ece\u8fd9\u91cc\u5f00\u59cb\u8c08\u8c08React Native\u7684\u6982\u5ff5\u3002<\/p>\n<h1>React Native\u7684\u7ec4\u4ef6<\/h1>\n<p>\u5728React Native\u5b98\u65b9\u6587\u6863\u4e2d\uff0c\u5c06\u7ec4\u4ef6\u5206\u4e3a\u51e0\u79cd\u7c7b\u578b\u6765\u8c03\u7528\u3002<\/p>\n<p>\u672c\u5730\u7ec4\u4ef6-\u8d1f\u8d23\u5728\u6bcf\u4e2a\u64cd\u4f5c\u7cfb\u7edf\u4e2d\u652f\u6301\u89c6\u56fe\u7684\u90e8\u5206\u5907\u4efd\u7ec4\u4ef6\u3002<\/p>\n<p>\u6838\u5fc3\u7ec4\u4ef6<br \/>\nReact Native\u63d0\u4f9b\u4e86\u4e00\u4e2a\u53ef\u7acb\u5373\u4f7f\u7528\u7684\u672c\u5730\u7ec4\u4ef6\u96c6\u5408\u3002<\/p>\n<p>\u793e\u533a\u8d21\u732e\u7684\u7ec4\u4ef6<br \/>\n\u7531React Native\u793e\u533a\u5f00\u53d1\u7684\u5404\u4e2a\u64cd\u4f5c\u7cfb\u7edf\u72ec\u7279\u7684\u672c\u5730\u7ec4\u4ef6\u3002<\/p>\n<p>React Native\u7ec4\u4ef6\u662f\u7528\u6765\u4e0e\u4e0d\u540c\u64cd\u4f5c\u7cfb\u7edf\u7279\u5b9a\u90e8\u5206\u8fdb\u884c\u4ea4\u4e92\u7684\uff0c\u800c\u6838\u5fc3\u7ec4\u4ef6\u662f\u5c06\u8fd9\u4e9b\u7ec4\u4ef6\u6574\u5408\u5728\u4e00\u8d77\u7684\u3002\u5927\u6982\u6211\u4eec\u901a\u5e38\u4f1a\u4f7f\u7528\u6838\u5fc3\u7ec4\u4ef6\u3002\u5982\u679c\u9700\u8981\u7684\u6838\u5fc3\u7ec4\u4ef6\u4e0d\u591f\uff0c\u53ef\u80fd\u9700\u8981\u5bfb\u627e\u4e00\u4e9b\u7531\u793e\u533a\u8d21\u732e\u7684\u7ec4\u4ef6\u6765\u6ee1\u8db3\u9700\u6c42\u3002<\/p>\n<p>\u6211\u4f1a\u653e\u4e00\u5f20\u516c\u5f0f\u7c7b\u7684\u7ef4\u6069\u56fe\u50cf\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d339e37434c4406c65e5a\/17-0.png\" alt=\"react_native_component.png\" \/><\/div>\n<p>\u7406\u89e3\u9019\u500b\u5716\u7684\u524d\u63d0\u662f\u5df2\u7d93\u7406\u89e3React Components\uff0c\u56e0\u70baReact Native Components\u53ea\u662fReact Components\u7684\u4e00\u90e8\u5206\u3002<\/p>\n<h1>\u5bf9\u4e8eReact Native\u7684\u8bed\u6cd5\uff0c\u8bf7\u63d0\u4f9b\u4e00\u79cd\u4e2d\u6587\u672c\u5730\u5316\u7684\u7ffb\u8bd1\u9009\u9879\uff1a<\/h1>\n<p>\u73b0\u5728\u5f00\u59cb\u6b63\u9898\u3002\u6211\u60f3\u8981\u6765\u770b\u4e00\u4e0bReact Native\u72ec\u6709\u7684\u90e8\u5206\uff0c\u8fd9\u662fReact\u4e2d\u6ca1\u6709\u7684\u7279\u70b9\u3002<\/p>\n<h3>\u7406\u89e3App.tsx\u6587\u4ef6<\/h3>\n<p>\u8ba9\u6211\u4eec\u9996\u5148\u89e3\u8bfb\u901a\u8fc7expo init\u547d\u4ee4\u521b\u5efa\u7684App.tsx\u6a21\u677f\u3002\u6211\u5df2\u5c06\u6587\u672c\u66f4\u6539\u4e3a\u201cHello,World\u201d\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">StatusBar<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">expo-status-bar<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">StyleSheet<\/span><span class=\"p\">,<\/span> <span class=\"nx\">Text<\/span><span class=\"p\">,<\/span> <span class=\"nx\">View<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-native<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">function<\/span> <span class=\"nx\">App<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\r\n    <span class=\"p\">&lt;<\/span><span class=\"nc\">View<\/span> <span class=\"na\">style<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">styles<\/span><span class=\"p\">.<\/span><span class=\"nx\">container<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>\r\n      <span class=\"p\">&lt;<\/span><span class=\"nc\">Text<\/span><span class=\"p\">&gt;<\/span>Hello,World<span class=\"p\">&lt;\/<\/span><span class=\"nc\">Text<\/span><span class=\"p\">&gt;<\/span>\r\n      <span class=\"p\">&lt;<\/span><span class=\"nc\">StatusBar<\/span> <span class=\"na\">style<\/span><span class=\"p\">=<\/span><span class=\"s\">\"auto\"<\/span> <span class=\"p\">\/&gt;<\/span>\r\n    <span class=\"p\">&lt;\/<\/span><span class=\"nc\">View<\/span><span class=\"p\">&gt;<\/span>\r\n  <span class=\"p\">);<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">styles<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">StyleSheet<\/span><span class=\"p\">.<\/span><span class=\"nx\">create<\/span><span class=\"p\">({<\/span>\r\n  <span class=\"na\">container<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"na\">flex<\/span><span class=\"p\">:<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"na\">backgroundColor<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">#fff<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"na\">alignItems<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">center<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"na\">justifyContent<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">center<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"p\">},<\/span>\r\n<span class=\"p\">});<\/span>\r\n<\/code><\/pre>\n<p>\u9996\u5148\uff0c\u4f3c\u4e4e\u6b63\u5728\u5bfc\u5165React\uff0c\u4f46\u8fd9\u4e0eReact\u4e0d\u540c\uff0c\u662f\u5426\u662f\u5fc5\u8981\u7684\uff1f\u4e5f\u8bb8\u662f\u5728\u5185\u90e8\u4f7f\u7528\u5b83\u5427\u3002\u5f53\u6211\u8c03\u67e5StatusBar\u65f6\uff0c\u53d1\u73b0\u5b83\u662f\u6307\u663e\u793a\u5728\u79fb\u52a8\u8bbe\u5907\u9876\u90e8\u7684\u7535\u6c60\u7535\u91cf\u548c\u4fe1\u53f7\u72b6\u51b5\u56fe\u6807\u7684\u533a\u57df\uff0c\u79f0\u4e3a\u72b6\u6001\u680f\u3002View\u548cText\u662fReact Native\u7684\u6838\u5fc3\u7ec4\u4ef6\uff0c\u7a0d\u540e\u4f1a\u8fdb\u884c\u8be6\u7ec6\u8bf4\u660e\u3002\u770b\u8d77\u6765\u5bf9View\u5e94\u7528\u4e86\u6837\u5f0f\uff0c\u8bbe\u7f6e\u4e86\u4e00\u4e2a\u540d\u4e3acontainer\u7684styles\u5bf9\u8c61\u5c5e\u6027\uff0c\u5e76\u7f16\u5199\u4e86\u6837\u5f0f\u3002\u5173\u4e8e\u6837\u5f0f\uff0c\u7a0d\u540e\u4f1a\u6709\u8be6\u7ec6\u8bf4\u660e\uff0c\u4f46\u5728\u8fd9\u91cc\u9700\u8981\u4f7f\u7528\u9a7c\u5cf0\u547d\u540d\u6cd5\uff0c\u4e0eReact\u4e2d\u7684\u5185\u8054\u6837\u5f0f\u76f8\u540c\u3002<\/p>\n<p>\u6211\u5927\u6982\u770b\u4e86\u4e00\u4e0b\uff0c\u57fa\u672c\u6846\u67b6\u548cReact\u6ca1\u6709\u592a\u5927\u5dee\u522b\uff0c\u6240\u4ee5\u53ea\u9700\u8bb0\u4f4f\u5404\u4e2a\u7ec4\u4ef6\u5c31\u53ef\u4ee5\u4e86\u3002<\/p>\n<h3>\u7ec4\u4ef6\u7684\u5c5e\u6027<\/h3>\n<p>\u67e5\u770bReact Native\u7684\u53c2\u8003\u8d44\u6599\uff0c\u53ef\u4ee5\u770b\u5230props\u5728iOS\u548cAndroid\u64cd\u4f5c\u7cfb\u7edf\u4e2d\u6709\u8bb8\u591a\u5dee\u5f02\u3002\u6b64\u5916\uff0cprops\u7684\u6570\u91cf\u672c\u8eab\u76f8\u5f53\u591a\uff0c\u8981\u5168\u90e8\u8bb0\u4f4f\u975e\u5e38\u56f0\u96be\u3002\u5728\u672c\u6587\u4e2d\uff0c\u4e3b\u8981\u4e0d\u6d89\u53ca\u7279\u5b9a\u4e8e\u6bcf\u4e2a\u64cd\u4f5c\u7cfb\u7edf\u7684props\uff0c\u5e76\u4e14\u53ea\u4ecb\u7ecd\u53ef\u80fd\u4f1a\u4f7f\u7528\u5230\u7684props\u3002\u5982\u679c\u60a8\u60f3\u4e86\u89e3\u66f4\u591a\uff0c\u8bf7\u53c2\u8003\u5b98\u65b9\u53c2\u8003\u8d44\u6599[3]\u3002<\/p>\n<h3>\u89c2\u770b<\/h3>\n<p>\u4ee5\u4e0b\u662fReact Native\u4e2d\u6700\u57fa\u672c\u7684\u7ec4\u4ef6\uff0c\u4f60\u53ef\u4ee5\u5c06\u5176\u89c6\u4e3a\u7c7b\u4f3c\u4e8ediv\u6807\u7b7e\uff08\u4e25\u683c\u6765\u8bf4\u6709\u4e9b\u4e0d\u540c\uff09\u3002<\/p>\n<h3>iOS\u7684SafeAreaView<\/h3>\n<p>\u5728iOS\u8bbe\u5907\u4e0a\uff0c\u7531\u4e8e\u7269\u7406\u5dee\u5f02\uff0c\u5982\u5218\u6d77\u548c\u5706\u89d2\u7b49\uff0c\u5b89\u5168\u6e32\u67d3\u7684\u8303\u56f4\u4f1a\u6709\u6240\u4e0d\u540c\u3002\u4f7f\u7528\u8be5\u7ec4\u4ef6\u53ef\u4ee5\u5728\u5b89\u5168\u8303\u56f4\u5185\u5448\u73b0\u5185\u5bb9\u3002<\/p>\n<h3>\u6587\u672c<\/h3>\n<p>\u5982\u679c\u8981\u5199\u6587\u5b57\uff0c\u5219\u57fa\u672c\u4e0a\u4f7f\u7528\u8fd9\u4e2a\u3002\u5373\u4f7f\u76f4\u63a5\u5199\u5728\u89c6\u56fe\u4e0a\u4e5f\u4e0d\u4f1a\u88ab\u53cd\u6620\u51fa\u6765\u3002<\/p>\n<p>\u5728Android\u548ciOS\u4e2d\uff0c\u53ef\u4ee5\u4e3a\u5b57\u7b26\u4e32\u8303\u56f4\u6dfb\u52a0\u7279\u5b9a\u7684\u683c\u5f0f\uff0c\u4e3a\u4e86\u5b9e\u73b0\u8fd9\u4e2a\u529f\u80fd\uff0c\u53ef\u4ee5\u5bf9\u6587\u672c\u8fdb\u884c\u5d4c\u5957\u3002\u901a\u8fc7\u5bf9\u5d4c\u5957\u6587\u672c\u8fdb\u884c\u6837\u5f0f\u8bbe\u7f6e\uff0c\u53ef\u4ee5\u4e3a\u4efb\u610f\u8303\u56f4\u6dfb\u52a0\u683c\u5f0f\u3002<\/p>\n<p>\u30fb\u5e03\u5c40\u975e\u5e38\u7279\u6b8a<br \/>\n\u6b64\u5916\uff0c\u6587\u672c\u5728\u5e03\u5c40\u65b9\u9762\u4e5f\u975e\u5e38\u7279\u6b8a\u3002\u6d4b\u8bd5\u4e2d\u7684\u5143\u7d20\u53ef\u80fd\u4e0d\u662f\u957f\u65b9\u5f62\uff0c\u4f1a\u6839\u636e\u884c\u7684\u7ed3\u675f\u8fdb\u884c\u6362\u884c\u3002<\/p>\n<p>\u30fb\u6837\u5f0f\u7684\u7ee7\u627f\u53d7\u5230\u9650\u5236<br \/>\n\u6587\u672c\u6837\u5f0f\u53ea\u80fd\u7531Text\u7ee7\u627f\u3002\u6362\u53e5\u8bdd\u8bf4\uff0c\u5728View\u4e2d\u5bf9\u6587\u672c\u8fdb\u884c\u6837\u5f0f\u5316\u662f\u65e0\u6548\u7684\u3002\u5b98\u65b9\u5efa\u8bae\u5982\u679c\u60f3\u8981\u91cd\u7528\u7279\u5b9a\u6837\u5f0f\u7684Text\uff0c\u5219\u5e94\u5b9a\u4e49\u4e00\u4e2a\u57fa\u4e8e\u73b0\u6709Text\u8fdb\u884c\u6269\u5c55\u7684\u7ec4\u4ef6\u3002\u5728Text\u5185\u90e8\uff0c\u6837\u5f0f\u662f\u7ee7\u627f\u7684\uff0c\u6240\u4ee5\u5728\u5d4c\u5957\u7684Text\u4e2d\uff0c\u7236\u7ea7\u6837\u5f0f\u5c06\u88ab\u5e94\u7528\u3002<\/p>\n<h3>\u56fe\u50cf<\/h3>\n<p>\u4f7f\u7528\u56fe\u7247\u65f6\u4f7f\u7528\u3002\u901a\u8fc7\u5c06\u53c2\u8003\u4f20\u9012\u7ed9\u9053\u5177\u7684\u8d44\u6e90\uff0c\u53ef\u4ee5\u663e\u793a\u56fe\u50cf\u3002\u4ee5\u4e0b\u662f\u5b98\u65b9\u7684\u793a\u4f8b\u3002<\/p>\n<pre class=\"post-pre\"><code>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">View<\/span><span class=\"p\">,<\/span> <span class=\"nx\">Image<\/span><span class=\"p\">,<\/span> <span class=\"nx\">StyleSheet<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react-native<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">styles<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">StyleSheet<\/span><span class=\"p\">.<\/span><span class=\"nx\">create<\/span><span class=\"p\">({<\/span>\r\n  <span class=\"na\">container<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"na\">paddingTop<\/span><span class=\"p\">:<\/span> <span class=\"mi\">50<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"p\">},<\/span>\r\n  <span class=\"na\">stretch<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"na\">width<\/span><span class=\"p\">:<\/span> <span class=\"mi\">50<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"na\">height<\/span><span class=\"p\">:<\/span> <span class=\"mi\">200<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"na\">resizeMode<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">stretch<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"p\">},<\/span>\r\n<span class=\"p\">});<\/span>\r\n\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">DisplayAnImageWithStyle<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\r\n    <span class=\"p\">&lt;<\/span><span class=\"nc\">View<\/span> <span class=\"na\">style<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">styles<\/span><span class=\"p\">.<\/span><span class=\"nx\">container<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>\r\n      <span class=\"p\">&lt;<\/span><span class=\"nc\">Image<\/span>\r\n        <span class=\"na\">style<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">styles<\/span><span class=\"p\">.<\/span><span class=\"nx\">stretch<\/span><span class=\"si\">}<\/span>\r\n        <span class=\"na\">source<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">require<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">@expo\/snack-static\/react-native-logo.png<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span><span class=\"si\">}<\/span>\r\n      <span class=\"p\">\/&gt;<\/span>\r\n    <span class=\"p\">&lt;\/<\/span><span class=\"nc\">View<\/span><span class=\"p\">&gt;<\/span>\r\n  <span class=\"p\">);<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">DisplayAnImageWithStyle<\/span><span class=\"p\">;<\/span>\r\n<\/code><\/pre>\n<p>\u4ece[3]\u4e2d\u5f15\u7528\u3002<\/p>\n<h3>\u8f93\u5165<\/h3>\n<p>\u53ea\u9700\u4e00\u500b\u9078\u9805\uff0c\u8acb\u5c07\u4ee5\u4e0b\u539f\u6587\u4ee5\u4e2d\u6587\u9032\u884c\u7ffb\u8b6f\uff1a\u5165\u529b\u3067\u4f7f\u7528\u3057\u307e\u3059\u3002\u5168\u90e8\u8aaa\u660e\u5c07\u6703\u8b8a\u5f97\u5f88\u5197\u9577\uff0c\u6240\u4ee5\u6211\u5011\u5728\u4e0b\u9762\u8209\u4f8b\u8aaa\u660e\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">SafeAreaView<\/span><span class=\"p\">,<\/span> <span class=\"nx\">StyleSheet<\/span><span class=\"p\">,<\/span> <span class=\"nx\">TextInput<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-native<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">UselessTextInput<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">text<\/span><span class=\"p\">,<\/span> <span class=\"nx\">onChangeText<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">useState<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Useless Text<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\r\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">number<\/span><span class=\"p\">,<\/span> <span class=\"nx\">onChangeNumber<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">useState<\/span><span class=\"p\">(<\/span><span class=\"kc\">null<\/span><span class=\"p\">);<\/span>\r\n\r\n  <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\r\n    <span class=\"p\">&lt;<\/span><span class=\"nc\">SafeAreaView<\/span><span class=\"p\">&gt;<\/span>\r\n      <span class=\"p\">&lt;<\/span><span class=\"nc\">TextInput<\/span>\r\n        <span class=\"na\">style<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">styles<\/span><span class=\"p\">.<\/span><span class=\"nx\">input<\/span><span class=\"si\">}<\/span>\r\n        <span class=\"na\">onChangeText<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">onChangeText<\/span><span class=\"si\">}<\/span>\r\n        <span class=\"na\">value<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">text<\/span><span class=\"si\">}<\/span>\r\n      <span class=\"p\">\/&gt;<\/span>\r\n      <span class=\"p\">&lt;<\/span><span class=\"nc\">TextInput<\/span>\r\n        <span class=\"na\">style<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">styles<\/span><span class=\"p\">.<\/span><span class=\"nx\">input<\/span><span class=\"si\">}<\/span>\r\n        <span class=\"na\">onChangeText<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">onChangeNumber<\/span><span class=\"si\">}<\/span>\r\n        <span class=\"na\">value<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">number<\/span><span class=\"si\">}<\/span>\r\n        <span class=\"na\">placeholder<\/span><span class=\"p\">=<\/span><span class=\"s\">\"useless placeholder\"<\/span>\r\n        <span class=\"na\">keyboardType<\/span><span class=\"p\">=<\/span><span class=\"s\">\"numeric\"<\/span>\r\n      <span class=\"p\">\/&gt;<\/span>\r\n    <span class=\"p\">&lt;\/<\/span><span class=\"nc\">SafeAreaView<\/span><span class=\"p\">&gt;<\/span>\r\n  <span class=\"p\">);<\/span>\r\n<span class=\"p\">};<\/span>\r\n\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">styles<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">StyleSheet<\/span><span class=\"p\">.<\/span><span class=\"nx\">create<\/span><span class=\"p\">({<\/span>\r\n  <span class=\"na\">input<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"na\">height<\/span><span class=\"p\">:<\/span> <span class=\"mi\">40<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"na\">margin<\/span><span class=\"p\">:<\/span> <span class=\"mi\">12<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"na\">borderWidth<\/span><span class=\"p\">:<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"na\">padding<\/span><span class=\"p\">:<\/span> <span class=\"mi\">10<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"p\">},<\/span>\r\n<span class=\"p\">});<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">UselessTextInput<\/span><span class=\"p\">;<\/span>\r\n<\/code><\/pre>\n<p>\u4ece[3]\u4e2d\u6458\u5f55<\/p>\n<p>\u5728\u4f7f\u7528\u4e2d\u6709\u4e00\u4e2a\u6709\u8da3\u7684\u65b9\u6cd5\u662f\u5c06state\u7684setter\u653e\u5165onChangeText\u4e2d\uff0c\u8fd9\u6837\u53ef\u4ee5\u5728\u8f93\u5165\u8fc7\u7a0b\u4e2d\u540c\u65f6\u53cd\u6620\u5e76\u4fdd\u6301\u5728state\u4e2d\u3002\u6211\u60f3\u8ba9\u4eba\u62c5\u5fc3\u7684\u662f\uff0c\u5728\u4f7f\u7528TypeScript\u65f6\uff0c\u5982\u4f55\u533a\u5206number\u548cstring\u3002\u5982\u679c\u6709\u65f6\u95f4\u7684\u8bdd\uff0c\u6211\u4f1a\u8fdb\u884c\u9a8c\u8bc1\u5e76\u66f4\u65b0\u3002<\/p>\n<p>\u30fb\u5e95\u90e8\u6709\u4e00\u6761\u8fb9\u6846<br \/>\nTextInput\u9ed8\u8ba4\u5728\u89c6\u56fe\u7684\u5e95\u90e8\u5177\u6709\u8fb9\u6846\u3002\u8fd9\u662f\u7531\u7cfb\u7edf\u63d0\u4f9b\u7684\u80cc\u666f\u56fe\u50cf\u8bbe\u7f6e\u7684\u586b\u5145\uff0c\u5e76\u4e14\u65e0\u6cd5\u66f4\u6539\u3002\u4e3a\u4e86\u907f\u514d\u8fd9\u4e2a\u95ee\u9898\uff0c\u9700\u8981\u660e\u786e\u5730\u4e0d\u8bbe\u7f6e\u9ad8\u5ea6\uff0c\u8fd9\u6837\u7cfb\u7edf\u624d\u80fd\u5728\u9002\u5f53\u7684\u4f4d\u7f6e\u663e\u793a\u8fb9\u6846\uff0c\u6216\u8005\u5c06underlineColorAndroid\u8bbe\u7f6e\u4e3a\u900f\u660e\u4ee5\u4e0d\u663e\u793a\u8fb9\u6846\u3002\u8bf7\u67e5\u770b\u5b98\u65b9\u53c2\u8003\u8d44\u6599\u4ee5\u4e86\u89e3\u66f4\u591a\u8be6\u7ec6\u4fe1\u606f\u3002<\/p>\n<h3>\u6eda\u52a8\u89c6\u56fe<\/h3>\n<p>\u6211\u76f4\u63a5\u7ffb\u8bd1\u4e86\u53c2\u8003\u8d44\u6599\uff0c\u4f46\u6709\u4e00\u4e9b\u5730\u65b9\u6211\u4e0d\u592a\u7406\u89e3\uff0c\u6240\u4ee5\u53ef\u80fd\u6709\u4e9b\u96be\u4ee5\u7406\u89e3\u3002<\/p>\n<p>\u5982\u679c\u60f3\u8981\u6eda\u52a8\uff0c\u53ef\u4ee5\u4f7f\u7528\u5b83\u3002\u5728React Native\u4e2d\uff0c\u5982\u679c\u8981\u4f7f\u7528View\u8fdb\u884c\u663e\u793a\uff0c\u5373\u4f7f\u5c1d\u8bd5\u6e32\u67d3\u5927\u4e8e\u663e\u793a\u5c4f\u5e55\u533a\u57df\u7684\u5185\u5bb9\uff0c\u4e5f\u4e0d\u4f1a\u81ea\u52a8\u6eda\u52a8\u3002\u56e0\u4e3a\u5f88\u5c11\u6709\u4e0d\u9700\u8981\u6eda\u52a8\u7684\u60c5\u51b5\uff0c\u6240\u4ee5\u57fa\u672c\u4e0a\u4f1a\u4f7f\u7528\u5b83\u5427\u3002<\/p>\n<p>\u300c\u6240\u6709\u7684\u7236\u89c6\u56fe\u90fd\u9700\u8981\u8fdb\u884c\u9ad8\u5ea6\u9650\u5236\u3002\u5728\u53c2\u8003\u6587\u732e\u4e2d\uff0c\u4f7f\u7528bounded\u8fd9\u4e2a\u8bcd\u6765\u63cf\u8ff0\uff0c\u4f46\u5bf9\u4e8e\u8be5\u7ffb\u8bd1\u662f\u5426\u6b63\u786e\u5b58\u6709\u7591\u95ee\u3002\u9650\u5236\u9ad8\u5ea6\u7684\u65b9\u6cd5\u6709\u4e24\u79cd\uff0c\u4e00\u79cd\u662f\u76f4\u63a5\u8bbe\u7f6e\u89c6\u56fe\u7684\u9ad8\u5ea6\uff08\u4e0d\u63a8\u8350\uff09\uff0c\u53e6\u4e00\u79cd\u662f\u7ed9\u6240\u6709\u7236\u89c6\u56fe\u8bbe\u7f6e\u9ad8\u5ea6\u3002\u53c2\u8003\u6587\u732e\u4e2d\u6307\u51fa\u5982\u679c\u5fd8\u8bb0\u4f7f\u7528{flex:1}\u4f1a\u5bfc\u81f4\u9519\u8bef\uff0c\u4f46\u6211\u5e76\u4e0d\u592a\u660e\u767d\u3002\u4ee5\u4e0b\u662f\u4e00\u4e2a\u793a\u4f8b\uff1a&#8221;<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">StyleSheet<\/span><span class=\"p\">,<\/span> <span class=\"nx\">Text<\/span><span class=\"p\">,<\/span> <span class=\"nx\">SafeAreaView<\/span><span class=\"p\">,<\/span> <span class=\"nx\">ScrollView<\/span><span class=\"p\">,<\/span> <span class=\"nx\">StatusBar<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react-native<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">App<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\r\n    <span class=\"p\">&lt;<\/span><span class=\"nc\">SafeAreaView<\/span> <span class=\"na\">style<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">styles<\/span><span class=\"p\">.<\/span><span class=\"nx\">container<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>\r\n      <span class=\"p\">&lt;<\/span><span class=\"nc\">ScrollView<\/span> <span class=\"na\">style<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">styles<\/span><span class=\"p\">.<\/span><span class=\"nx\">scrollView<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>\r\n        <span class=\"p\">&lt;<\/span><span class=\"nc\">Text<\/span> <span class=\"na\">style<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">styles<\/span><span class=\"p\">.<\/span><span class=\"nx\">text<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>\r\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\r\n          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad\r\n          minim veniam, quis nostrud exercitation ullamco laboris nisi ut\r\n          aliquip ex ea commodo consequat. Duis aute irure dolor in\r\n          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\r\n          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in\r\n          culpa qui officia deserunt mollit anim id est laborum.\r\n        <span class=\"p\">&lt;\/<\/span><span class=\"nc\">Text<\/span><span class=\"p\">&gt;<\/span>\r\n      <span class=\"p\">&lt;\/<\/span><span class=\"nc\">ScrollView<\/span><span class=\"p\">&gt;<\/span>\r\n    <span class=\"p\">&lt;\/<\/span><span class=\"nc\">SafeAreaView<\/span><span class=\"p\">&gt;<\/span>\r\n  <span class=\"p\">);<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">styles<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">StyleSheet<\/span><span class=\"p\">.<\/span><span class=\"nx\">create<\/span><span class=\"p\">({<\/span>\r\n  <span class=\"na\">container<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"na\">flex<\/span><span class=\"p\">:<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"na\">paddingTop<\/span><span class=\"p\">:<\/span> <span class=\"nx\">StatusBar<\/span><span class=\"p\">.<\/span><span class=\"nx\">currentHeight<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"p\">},<\/span>\r\n  <span class=\"na\">scrollView<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"na\">backgroundColor<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">pink<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"na\">marginHorizontal<\/span><span class=\"p\">:<\/span> <span class=\"mi\">20<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"p\">},<\/span>\r\n  <span class=\"na\">text<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"na\">fontSize<\/span><span class=\"p\">:<\/span> <span class=\"mi\">42<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"p\">},<\/span>\r\n<span class=\"p\">});<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">App<\/span>\r\n<\/code><\/pre>\n<p>\u5f15\u81ea[3]\u3002<\/p>\n<p>\u53ef\u4ee5\u901a\u8fc7\u5c06\u6b64props\u8bbe\u4e3afalse\u6765\u9690\u85cf\u6eda\u52a8\u6761\u3002<\/p>\n<p>\u5c06\u6b64\u9053\u5177\u8bbe\u4e3atrue\u5373\u53ef\u652f\u6301\u6c34\u5e73\u6eda\u52a8\u3002<\/p>\n<p>\u4e0eFlatList\u7684\u4e0d\u540c\u4e4b\u5904<br \/>\n\u7531\u4e8eScrollView\u4e00\u6b21\u6027\u6e32\u67d3\u6240\u6709\u5b50\u7ec4\u4ef6\uff0c\u56e0\u6b64\u5b58\u5728\u6027\u80fd\u95ee\u9898\u3002FlatList\u5ef6\u8fdf\u6e32\u67d3\u9879\u76ee\uff0c\u4ec5\u5728\u9879\u76ee\u5373\u5c06\u663e\u793a\u65f6\u8fdb\u884c\u6e32\u67d3\uff0c\u5e76\u901a\u8fc7\u5220\u9664\u5927\u91cf\u6eda\u52a8\u5230\u5c4f\u5e55\u5916\u7684\u9879\u76ee\u6765\u8282\u7701\u5185\u5b58\u548c\u5904\u7406\u65f6\u95f4\u3002FlatList\u8fd8\u652f\u6301\u9879\u76ee\u95f4\u8ddd\u3001\u591a\u5217\u548c\u65e0\u9650\u6eda\u52a8\u52a0\u8f7d\u7b49\u529f\u80fd\uff0c\u975e\u5e38\u65b9\u4fbf\u3002<\/p>\n<p>\u5199\u5230\u8fd9\u91cc\u6211\u7a81\u7136\u60f3\u5230\uff0c\u4e5f\u8bb8ScrollView\u8fd9\u4e2a\u7ec4\u4ef6\u7528\u5f97\u5e76\u4e0d\u591a\u5427\uff1f\u6839\u636e\u4e0d\u540c\u60c5\u51b5\u9700\u8981\u7528\u6765\u5206\u522b\u5bf9\u5f85\u5417\uff1f<\/p>\n<h3>\u6837\u5f0f\u8868<\/h3>\n<p>\u6211\u5011\u5230\u76ee\u524d\u70ba\u6b62\u90fd\u5728\u4f7f\u7528\u9019\u500b\uff0c\u4e3b\u8981\u662f\u70ba\u4e86\u4f7f\u7528CSS\u6a23\u5f0f\u3002\u96d6\u7136\u6c92\u6709\u4ec0\u9ebc\u7279\u5225\u8981\u8aaa\u7684\uff0c\u4f46\u6211\u89ba\u5f97React Native\u548cTailwind CSS\u7684\u76f8\u5bb9\u6027\u53ef\u80fd\u4e0d\u592a\u597d\u3002\u6839\u64da\u6211\u7684\u8abf\u67e5\uff0c\u4f7f\u7528\u4e00\u4e9b\u5eab\u597d\u50cf\u53ef\u4ee5\u89e3\u6c7a\u9019\u500b\u554f\u984c\uff0c\u4f46\u8003\u616e\u5230VSCode\u7684\u667a\u80fd\u611f\u61c9\u7b49\u554f\u984c\uff0c\u4e0d\u77e5\u9053\u53ef\u884c\u6027\u5982\u4f55\u3002<\/p>\n<p>\u6211\u8ba4\u4e3aCSS in JS\u5728React Native\u4e2d\u7279\u522b\u9002\u7528\uff0c\u56e0\u4e3a\u5b83\u53ef\u4ee5\u51e0\u4e4e\u548cWeb\u5f00\u53d1\u4e00\u6837\u8fdb\u884c\u63cf\u8ff0\uff0c\u6709\u52a9\u4e8e\u964d\u4f4e\u5f00\u53d1\u6210\u672c\u3002\u6211\u4f7f\u7528\u7684\u662fstyled-components\u5199\u6cd5\uff0c\u6240\u4ee5\u4e0d\u592a\u4f1a\u9047\u5230\u56f0\u96be\u3002<\/p>\n<h3>\u6309\u94ae<\/h3>\n<p>\u8fd9\u662f\u4e00\u4e2a\u5bf9\u5e94\u4e8e\u6309\u94ae\u7684\u7ec4\u4ef6\u3002\u6211\u8ba4\u4e3a\u770b\u4e00\u4e0b\u4f1a\u66f4\u5feb\u660e\u767d\uff0c\u6240\u4ee5\u4e0b\u9762\u9644\u4e0a\u4e00\u4e2a\u4f8b\u5b50\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"p\">&lt;<\/span><span class=\"nc\">Button<\/span>\r\n        <span class=\"na\">title<\/span><span class=\"p\">=<\/span><span class=\"s\">\"Press me\"<\/span>\r\n        <span class=\"na\">disabled<\/span>\r\n        <span class=\"na\">onPress<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">Alert<\/span><span class=\"p\">.<\/span><span class=\"nx\">alert<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Cannot press this one<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span><span class=\"si\">}<\/span>\r\n      <span class=\"p\">\/&gt;<\/span>\r\n<\/code><\/pre>\n<p>[3]\u5f15\u8ff0\u81ea\u3002<\/p>\n<p>\u6309\u7167\u4e0a\u8ff0\u6587\u672c\u7684\u8981\u6c42\uff0c\u4ee5\u4e0b\u662f\u4e00\u79cd\u4e2d\u6587\u7684\u8868\u8fbe\u65b9\u5f0f:<\/p>\n<p>\u4f3c\u4e4e\u5fc5\u987b\u4f7f\u7528onPress\u548ctitle\u4f5c\u4e3aprops\u3002\u901a\u8fc7title\u53ef\u4ee5\u786e\u5b9a\u6309\u94ae\u7684\u663e\u793a\uff0c\u4f46\u662f\u65e0\u6cd5\u4f7f\u7528children\u8fdb\u884c\u8bbe\u7f6e\u5417\uff1f\u4f3c\u4e4e\u53ef\u4ee5\u4f7f\u7528Alert.alert\u6765\u5b9e\u73b0\u7c7b\u4f3c\u4e8ewindow.alert\u7684\u529f\u80fd\u3002\u5728\u8fd9\u4e2a\u4f8b\u5b50\u4e2d\uff0c\u8bbe\u7f6e\u4e3adisabled\u4f1a\u5bfc\u81f4\u6309\u94ae\u770b\u8d77\u6765\u65e0\u6cd5\u4f7f\u7528\u3002\u5982\u679c\u60f3\u8981\u52a8\u6001\u786e\u5b9a\uff0c\u53ef\u4ee5\u5c06\u4e00\u4e2a\u5e03\u5c14\u53d8\u91cf\u653e\u5728disabled\u7684\u4f4d\u7f6e\u3002<\/p>\n<h3>\u8f6c\u6362<\/h3>\n<p>\u8fd9\u4e2aSwitch\u4e0d\u662f\u6307switch\u8bed\u53e5\uff0c\u800c\u662f\u6307\u7528\u4e8e\u5207\u6362\u7684\u6309\u94ae\uff08\u53ef\u80fd\u6709\u540d\u79f0\uff09\u3002\u5b83\u662f\u5e38\u89c1\u4e8e\u53c2\u8003\u8d44\u6599\u4e2d\u7684\u5207\u6362\u6697\u6a21\u5f0f\u90e8\u5206\u7684\u4e00\u79cd\u3002\u4ee5\u4e0b\u662f\u793a\u4f8b\u3002<\/p>\n<pre class=\"post-pre\"><code>      <span class=\"p\">&lt;<\/span><span class=\"nc\">Switch<\/span>\r\n        <span class=\"na\">trackColor<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"p\">{<\/span> <span class=\"na\">false<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">#767577<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"na\">true<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">#81b0ff<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">}<\/span><span class=\"si\">}<\/span>\r\n        <span class=\"na\">thumbColor<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">isEnabled<\/span> <span class=\"p\">?<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">#f5dd4b<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">#f4f3f4<\/span><span class=\"dl\">\"<\/span><span class=\"si\">}<\/span>\r\n        <span class=\"na\">ios_backgroundColor<\/span><span class=\"p\">=<\/span><span class=\"s\">\"#3e3e3e\"<\/span>\r\n        <span class=\"na\">onValueChange<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">toggleSwitch<\/span><span class=\"si\">}<\/span>\r\n        <span class=\"na\">value<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">isEnabled<\/span><span class=\"si\">}<\/span>\r\n      <span class=\"p\">\/&gt;<\/span>\r\n<\/code><\/pre>\n<p>\u901a\u8fc7\u70b9\u51fb\uff0cboolean\u578b\u53d8\u91cf\u5c06\u5207\u6362\uff0c\u5e76\u6839\u636evalue\u7684\u503c\u8fdb\u884c\u591a\u79cd\u53d8\u5316\u3002<\/p>\n<h3>\u53ef\u89e6\u6478\u6027<\/h3>\n<p>\u5f53\u53d7\u5230\u62bc\u538b\u65f6\uff0c\u88ab\u5305\u88f9\u7684\u89c6\u56fe\u7684\u4e0d\u900f\u660e\u5ea6\u4f1a\u51cf\u5c0f\uff0c\u53d8\u5f97\u660f\u6697\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"p\">&lt;<\/span><span class=\"nc\">TouchableOpacity<\/span>\r\n        <span class=\"na\">style<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">styles<\/span><span class=\"p\">.<\/span><span class=\"nx\">button<\/span><span class=\"si\">}<\/span>\r\n        <span class=\"na\">onPress<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">onPress<\/span><span class=\"si\">}<\/span>\r\n      <span class=\"p\">&gt;<\/span>\r\n        <span class=\"p\">&lt;<\/span><span class=\"nc\">Text<\/span><span class=\"p\">&gt;<\/span>Press Here<span class=\"p\">&lt;\/<\/span><span class=\"nc\">Text<\/span><span class=\"p\">&gt;<\/span>\r\n      <span class=\"p\">&lt;\/<\/span><span class=\"nc\">TouchableOpacity<\/span><span class=\"p\">&gt;<\/span>\r\n<\/code><\/pre>\n<p>[3]\u7684\u5f15\u7528\u5982\u4e0b\uff1a<\/p>\n<h3>\u5e73\u9762\u5217\u8868<\/h3>\n<p>\u5982\u524d\u6240\u8ff0\uff0c\u7528\u4e8e\u8fdb\u884c\u5217\u8868\u663e\u793a\u3002<\/p>\n<p>\u8981\u8868\u793a\u7684\u6570\u7ec4\u6570\u636e\u3002<\/p>\n<p>\u6e32\u67d3\u9879\u76ee<br \/>\n\u6839\u636e\u6570\u636e\u6765\u51b3\u5b9a\u663e\u793a\u4ec0\u4e48\u7684\u51fd\u6570\u3002<\/p>\n<p>\u9644\u52a0\u6570\u636e\u3002\u4e0b\u9762\u7684\u793a\u4f8b\u4e2d\uff0c\u4e3a\u4e86\u91cd\u65b0\u6e32\u67d3\uff0c\u4f20\u9012\u4e86state\u3002<\/p>\n<p>keyExtractor \u6307\u5b9a\u7528\u4e8e\u66ff\u4ee3\u9ed8\u8ba4 key \u5c5e\u6027\u7684 id\u3002<\/p>\n<p>\u5982\u679c\u5185\u5bb9\u8d85\u51fa\u4e86\u6e32\u67d3\u533a\u57df\uff0c\u5185\u90e8\u72b6\u6001\u5c06\u4e0d\u4f1a\u88ab\u4fdd\u7559\u3002<br \/>\n\u6839\u636eFlatList\u7684\u89c4\u5b9a\uff0c\u8d85\u51fa\u6e32\u67d3\u533a\u57df\u7684\u5185\u5bb9\u7684\u5185\u90e8\u72b6\u6001\u4e0d\u4f1a\u88ab\u4fdd\u5b58\u3002\u56e0\u6b64\u5728\u66f4\u65b0\u72b6\u6001\u548c\u6e32\u67d3\u65f6\u9700\u8981\u6ce8\u610f\u3002<\/p>\n<p>\u5f53\u5185\u5bb9\u4ee5\u5f02\u6b65\u65b9\u5f0f\u5728\u5c4f\u5e55\u5916\u6e32\u67d3\u65f6\uff0c\u53ef\u4ee5\u66f4\u5feb\u5730\u6eda\u52a8\uff0c\u4f46\u53ef\u80fd\u6682\u65f6\u663e\u793a\u7a7a\u767d\u5185\u5bb9\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"nx\">React<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useState<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">FlatList<\/span><span class=\"p\">,<\/span> <span class=\"nx\">SafeAreaView<\/span><span class=\"p\">,<\/span> <span class=\"nx\">StatusBar<\/span><span class=\"p\">,<\/span> <span class=\"nx\">StyleSheet<\/span><span class=\"p\">,<\/span> <span class=\"nx\">Text<\/span><span class=\"p\">,<\/span> <span class=\"nx\">TouchableOpacity<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-native<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">DATA<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[<\/span>\r\n  <span class=\"p\">{<\/span>\r\n    <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">bd7acbea-c1b1-46c2-aed5-3ad53abb28ba<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"na\">title<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">First Item<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"p\">},<\/span>\r\n  <span class=\"p\">{<\/span>\r\n    <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">3ac68afc-c605-48d3-a4f8-fbd91aa97f63<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"na\">title<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Second Item<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"p\">},<\/span>\r\n  <span class=\"p\">{<\/span>\r\n    <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">58694a0f-3da1-471f-bd96-145571e29d72<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"na\">title<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Third Item<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"p\">},<\/span>\r\n<span class=\"p\">];<\/span>\r\n\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">Item<\/span> <span class=\"o\">=<\/span> <span class=\"p\">({<\/span> <span class=\"nx\">item<\/span><span class=\"p\">,<\/span> <span class=\"nx\">onPress<\/span><span class=\"p\">,<\/span> <span class=\"nx\">backgroundColor<\/span><span class=\"p\">,<\/span> <span class=\"nx\">textColor<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">(<\/span>\r\n  <span class=\"p\">&lt;<\/span><span class=\"nc\">TouchableOpacity<\/span> <span class=\"na\">onPress<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">onPress<\/span><span class=\"si\">}<\/span> <span class=\"na\">style<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"p\">[<\/span><span class=\"nx\">styles<\/span><span class=\"p\">.<\/span><span class=\"nx\">item<\/span><span class=\"p\">,<\/span> <span class=\"nx\">backgroundColor<\/span><span class=\"p\">]<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>\r\n    <span class=\"p\">&lt;<\/span><span class=\"nc\">Text<\/span> <span class=\"na\">style<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"p\">[<\/span><span class=\"nx\">styles<\/span><span class=\"p\">.<\/span><span class=\"nx\">title<\/span><span class=\"p\">,<\/span> <span class=\"nx\">textColor<\/span><span class=\"p\">]<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span><span class=\"si\">{<\/span><span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nx\">title<\/span><span class=\"si\">}<\/span><span class=\"p\">&lt;\/<\/span><span class=\"nc\">Text<\/span><span class=\"p\">&gt;<\/span>\r\n  <span class=\"p\">&lt;\/<\/span><span class=\"nc\">TouchableOpacity<\/span><span class=\"p\">&gt;<\/span>\r\n<span class=\"p\">);<\/span>\r\n\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">App<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">selectedId<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setSelectedId<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useState<\/span><span class=\"p\">(<\/span><span class=\"kc\">null<\/span><span class=\"p\">);<\/span>\r\n\r\n  <span class=\"kd\">const<\/span> <span class=\"nx\">renderItem<\/span> <span class=\"o\">=<\/span> <span class=\"p\">({<\/span> <span class=\"nx\">item<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">backgroundColor<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span> <span class=\"o\">===<\/span> <span class=\"nx\">selectedId<\/span> <span class=\"p\">?<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">#6e3b6e<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">#f9c2ff<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">color<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span> <span class=\"o\">===<\/span> <span class=\"nx\">selectedId<\/span> <span class=\"p\">?<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">white<\/span><span class=\"dl\">'<\/span> <span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">black<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n\r\n    <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\r\n      <span class=\"p\">&lt;<\/span><span class=\"nc\">Item<\/span>\r\n        <span class=\"na\">item<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">item<\/span><span class=\"si\">}<\/span>\r\n        <span class=\"na\">onPress<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">setSelectedId<\/span><span class=\"p\">(<\/span><span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">)<\/span><span class=\"si\">}<\/span>\r\n        <span class=\"na\">backgroundColor<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"p\">{<\/span> <span class=\"nx\">backgroundColor<\/span> <span class=\"p\">}<\/span><span class=\"si\">}<\/span>\r\n        <span class=\"na\">textColor<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"p\">{<\/span> <span class=\"nx\">color<\/span> <span class=\"p\">}<\/span><span class=\"si\">}<\/span>\r\n      <span class=\"p\">\/&gt;<\/span>\r\n    <span class=\"p\">);<\/span>\r\n  <span class=\"p\">};<\/span>\r\n\r\n  <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\r\n    <span class=\"p\">&lt;<\/span><span class=\"nc\">SafeAreaView<\/span> <span class=\"na\">style<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">styles<\/span><span class=\"p\">.<\/span><span class=\"nx\">container<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>\r\n      <span class=\"p\">&lt;<\/span><span class=\"nc\">FlatList<\/span>\r\n        <span class=\"na\">data<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">DATA<\/span><span class=\"si\">}<\/span>\r\n        <span class=\"na\">renderItem<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">renderItem<\/span><span class=\"si\">}<\/span>\r\n        <span class=\"na\">keyExtractor<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"p\">(<\/span><span class=\"nx\">item<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"si\">}<\/span>\r\n        <span class=\"na\">extraData<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">selectedId<\/span><span class=\"si\">}<\/span>\r\n      <span class=\"p\">\/&gt;<\/span>\r\n    <span class=\"p\">&lt;\/<\/span><span class=\"nc\">SafeAreaView<\/span><span class=\"p\">&gt;<\/span>\r\n  <span class=\"p\">);<\/span>\r\n<span class=\"p\">};<\/span>\r\n\r\n<span class=\"err\">\u30fb\u30fb\u30fb<\/span>\r\n<\/code><\/pre>\n<p>\u6211\u60f3\uff0c\u8fd9\u53ef\u80fd\u662f\u4e3a\u4e86\u66ff\u4ee3map\u51fd\u6570\u8fdb\u884c\u6e32\u67d3\u3002<\/p>\n<h3>\u8282\u76ee\u5217\u8868<\/h3>\n<p>\u8fd9\u662f\u4e00\u4e2a\u7c7b\u4f3c\u4e8e\u5e26\u6709\u6807\u9898\u7684FlatList\u7684\u4e1c\u897f\u3002\u7531\u4e8e\u51e0\u4e4e\u76f8\u540c\uff0c\u6240\u4ee5\u8bf7\u53c2\u8003\u4e0b\u65b9\u7684\u793a\u4f8b\u7a0b\u5e8f\u6765\u4f7f\u7528\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">StyleSheet<\/span><span class=\"p\">,<\/span> <span class=\"nx\">Text<\/span><span class=\"p\">,<\/span> <span class=\"nx\">View<\/span><span class=\"p\">,<\/span> <span class=\"nx\">SafeAreaView<\/span><span class=\"p\">,<\/span> <span class=\"nx\">SectionList<\/span><span class=\"p\">,<\/span> <span class=\"nx\">StatusBar<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-native<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">DATA<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[<\/span>\r\n  <span class=\"p\">{<\/span>\r\n    <span class=\"na\">title<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Main dishes<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"na\">data<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Pizza<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Burger<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Risotto<\/span><span class=\"dl\">\"<\/span><span class=\"p\">]<\/span>\r\n  <span class=\"p\">},<\/span>\r\n  <span class=\"p\">{<\/span>\r\n    <span class=\"na\">title<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Sides<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"na\">data<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">French Fries<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Onion Rings<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Fried Shrimps<\/span><span class=\"dl\">\"<\/span><span class=\"p\">]<\/span>\r\n  <span class=\"p\">},<\/span>\r\n  <span class=\"p\">{<\/span>\r\n    <span class=\"na\">title<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Drinks<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"na\">data<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Water<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Coke<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Beer<\/span><span class=\"dl\">\"<\/span><span class=\"p\">]<\/span>\r\n  <span class=\"p\">},<\/span>\r\n  <span class=\"p\">{<\/span>\r\n    <span class=\"na\">title<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Desserts<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"na\">data<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Cheese Cake<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Ice Cream<\/span><span class=\"dl\">\"<\/span><span class=\"p\">]<\/span>\r\n  <span class=\"p\">}<\/span>\r\n<span class=\"p\">];<\/span>\r\n\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">Item<\/span> <span class=\"o\">=<\/span> <span class=\"p\">({<\/span> <span class=\"nx\">title<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">(<\/span>\r\n  <span class=\"p\">&lt;<\/span><span class=\"nc\">View<\/span> <span class=\"na\">style<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">styles<\/span><span class=\"p\">.<\/span><span class=\"nx\">item<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>\r\n    <span class=\"p\">&lt;<\/span><span class=\"nc\">Text<\/span> <span class=\"na\">style<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">styles<\/span><span class=\"p\">.<\/span><span class=\"nx\">title<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span><span class=\"si\">{<\/span><span class=\"nx\">title<\/span><span class=\"si\">}<\/span><span class=\"p\">&lt;\/<\/span><span class=\"nc\">Text<\/span><span class=\"p\">&gt;<\/span>\r\n  <span class=\"p\">&lt;\/<\/span><span class=\"nc\">View<\/span><span class=\"p\">&gt;<\/span>\r\n<span class=\"p\">);<\/span>\r\n\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">App<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">(<\/span>\r\n  <span class=\"p\">&lt;<\/span><span class=\"nc\">SafeAreaView<\/span> <span class=\"na\">style<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">styles<\/span><span class=\"p\">.<\/span><span class=\"nx\">container<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>\r\n    <span class=\"p\">&lt;<\/span><span class=\"nc\">SectionList<\/span>\r\n      <span class=\"na\">sections<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">DATA<\/span><span class=\"si\">}<\/span>\r\n      <span class=\"na\">keyExtractor<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"p\">(<\/span><span class=\"nx\">item<\/span><span class=\"p\">,<\/span> <span class=\"nx\">index<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">item<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">index<\/span><span class=\"si\">}<\/span>\r\n      <span class=\"na\">renderItem<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"p\">({<\/span> <span class=\"nx\">item<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">&lt;<\/span><span class=\"nc\">Item<\/span> <span class=\"na\">title<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">item<\/span><span class=\"si\">}<\/span> <span class=\"p\">\/&gt;<\/span><span class=\"si\">}<\/span>\r\n      <span class=\"na\">renderSectionHeader<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"p\">({<\/span> <span class=\"na\">section<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">title<\/span> <span class=\"p\">}<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">(<\/span>\r\n        <span class=\"p\">&lt;<\/span><span class=\"nc\">Text<\/span> <span class=\"na\">style<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">styles<\/span><span class=\"p\">.<\/span><span class=\"nx\">header<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span><span class=\"si\">{<\/span><span class=\"nx\">title<\/span><span class=\"si\">}<\/span><span class=\"p\">&lt;\/<\/span><span class=\"nc\">Text<\/span><span class=\"p\">&gt;<\/span>\r\n      <span class=\"p\">)<\/span><span class=\"si\">}<\/span>\r\n    <span class=\"p\">\/&gt;<\/span>\r\n  <span class=\"p\">&lt;\/<\/span><span class=\"nc\">SafeAreaView<\/span><span class=\"p\">&gt;<\/span>\r\n<span class=\"p\">);<\/span>\r\n<span class=\"err\">\u30fb\u30fb\u30fb<\/span>\r\n<\/code><\/pre>\n<p>\u4ece\u30143\u3015\u4e2d\u5f15\u7528\u3002<\/p>\n<h1>\u6700\u540e<\/h1>\n<p>\u6211\u7b80\u5355\u5730\u6d4f\u89c8\u4e86\u6982\u5ff5\u548c\u8bed\u6cd5\uff0c\u5982\u679c\u7406\u89e3\u4e86\u5c31\u53ef\u4ee5\u8f7b\u677e\u5730\u4f7f\u7528\u3002\u53ea\u662f\uff0c\u6211\u53d1\u73b0\u9700\u8981\u8bb0\u4f4f\u7684\u4e1c\u897f\u6bd4\u6211\u60f3\u8c61\u4e2d\u591a\uff0c\u6240\u4ee5\u6211\u5e0c\u671b\u5728\u5b9e\u9645\u5f00\u53d1\u4e4b\u540e\u80fd\u6d4b\u8bd5\u4e00\u4e0b\u4f7f\u7528\u611f\u53d7\u3002<\/p>\n<h1>\u6587\u732e\u53c2\u8003\u3002<\/h1>\n<p>\u30101\u3011\uff1a\u5f15\u8a00<br \/>\n\u30102\u3011\uff1a\u5728Ubuntu20.04LTS\u4e0a\u5c1d\u8bd5React Native\u548cExpo<br \/>\n\u30103\u3011\uff1a\u6838\u5fc3\u7ec4\u4ef6\u548cAPI<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u9996\u5148 \u6211\u6700\u521d\u4f7f\u7528React\u8fdb\u884cweb\u5f00\u53d1\uff0c\u4f46\u73b0\u5728\u5f00\u59cb\u6d89\u8db3\u4f7f\u7528React Native\u8fdb\u884c\u79fb\u52a8\u7aef\u5f00\u53d1\u3002\u4f5c\u4e3a\u4e00\u4e2a\u4e4b [&hellip;]<\/p>\n","protected":false},"author":12,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-38331","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>\u4e00\u4f4dReact\u5de5\u7a0b\u5e08\u4f53\u9a8c\u4f7f\u7528React Native - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/zh\/blog\/\u4e00\u4f4dreact\u5de5\u7a0b\u5e08\u4f53\u9a8c\u4f7f\u7528react-native\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u4e00\u4f4dReact\u5de5\u7a0b\u5e08\u4f53\u9a8c\u4f7f\u7528React Native\" \/>\n<meta property=\"og:description\" content=\"\u9996\u5148 \u6211\u6700\u521d\u4f7f\u7528React\u8fdb\u884cweb\u5f00\u53d1\uff0c\u4f46\u73b0\u5728\u5f00\u59cb\u6d89\u8db3\u4f7f\u7528React Native\u8fdb\u884c\u79fb\u52a8\u7aef\u5f00\u53d1\u3002\u4f5c\u4e3a\u4e00\u4e2a\u4e4b [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/\u4e00\u4f4dreact\u5de5\u7a0b\u5e08\u4f53\u9a8c\u4f7f\u7528react-native\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-07T21:41:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-29T11:23:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d339e37434c4406c65e5a\/17-0.png\" \/>\n<meta name=\"author\" content=\"\u9038, \u79d1\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u9038, \u79d1\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%b8%80%e4%bd%8dreact%e5%b7%a5%e7%a8%8b%e5%b8%88%e4%bd%93%e9%aa%8c%e4%bd%bf%e7%94%a8react-native\/\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%b8%80%e4%bd%8dreact%e5%b7%a5%e7%a8%8b%e5%b8%88%e4%bd%93%e9%aa%8c%e4%bd%bf%e7%94%a8react-native\/\",\"name\":\"\u4e00\u4f4dReact\u5de5\u7a0b\u5e08\u4f53\u9a8c\u4f7f\u7528React Native - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2022-11-07T21:41:25+00:00\",\"dateModified\":\"2024-04-29T11:23:07+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/85c1dae56e6ea1e695c73d33c684d487\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%b8%80%e4%bd%8dreact%e5%b7%a5%e7%a8%8b%e5%b8%88%e4%bd%93%e9%aa%8c%e4%bd%bf%e7%94%a8react-native\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%b8%80%e4%bd%8dreact%e5%b7%a5%e7%a8%8b%e5%b8%88%e4%bd%93%e9%aa%8c%e4%bd%bf%e7%94%a8react-native\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%b8%80%e4%bd%8dreact%e5%b7%a5%e7%a8%8b%e5%b8%88%e4%bd%93%e9%aa%8c%e4%bd%bf%e7%94%a8react-native\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/zh\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u4e00\u4f4dReact\u5de5\u7a0b\u5e08\u4f53\u9a8c\u4f7f\u7528React Native\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/\",\"name\":\"Blog - Silicon Cloud\",\"description\":\"\",\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/85c1dae56e6ea1e695c73d33c684d487\",\"name\":\"\u9038, \u79d1\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c94f6d9cbbfbca863fab309840bd690c153c95f8490c290ad2ed54dd693dad16?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c94f6d9cbbfbca863fab309840bd690c153c95f8490c290ad2ed54dd693dad16?s=96&d=mm&r=g\",\"caption\":\"\u9038, \u79d1\"},\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/author\/keyi\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%b8%80%e4%bd%8dreact%e5%b7%a5%e7%a8%8b%e5%b8%88%e4%bd%93%e9%aa%8c%e4%bd%bf%e7%94%a8react-native\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u4e00\u4f4dReact\u5de5\u7a0b\u5e08\u4f53\u9a8c\u4f7f\u7528React Native - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/zh\/blog\/\u4e00\u4f4dreact\u5de5\u7a0b\u5e08\u4f53\u9a8c\u4f7f\u7528react-native\/","og_locale":"zh_CN","og_type":"article","og_title":"\u4e00\u4f4dReact\u5de5\u7a0b\u5e08\u4f53\u9a8c\u4f7f\u7528React Native","og_description":"\u9996\u5148 \u6211\u6700\u521d\u4f7f\u7528React\u8fdb\u884cweb\u5f00\u53d1\uff0c\u4f46\u73b0\u5728\u5f00\u59cb\u6d89\u8db3\u4f7f\u7528React Native\u8fdb\u884c\u79fb\u52a8\u7aef\u5f00\u53d1\u3002\u4f5c\u4e3a\u4e00\u4e2a\u4e4b [&hellip;]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/\u4e00\u4f4dreact\u5de5\u7a0b\u5e08\u4f53\u9a8c\u4f7f\u7528react-native\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2022-11-07T21:41:25+00:00","article_modified_time":"2024-04-29T11:23:07+00:00","og_image":[{"url":"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d339e37434c4406c65e5a\/17-0.png"}],"author":"\u9038, \u79d1","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u9038, \u79d1","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"4 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%b8%80%e4%bd%8dreact%e5%b7%a5%e7%a8%8b%e5%b8%88%e4%bd%93%e9%aa%8c%e4%bd%bf%e7%94%a8react-native\/","url":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%b8%80%e4%bd%8dreact%e5%b7%a5%e7%a8%8b%e5%b8%88%e4%bd%93%e9%aa%8c%e4%bd%bf%e7%94%a8react-native\/","name":"\u4e00\u4f4dReact\u5de5\u7a0b\u5e08\u4f53\u9a8c\u4f7f\u7528React Native - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2022-11-07T21:41:25+00:00","dateModified":"2024-04-29T11:23:07+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/85c1dae56e6ea1e695c73d33c684d487"},"breadcrumb":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%b8%80%e4%bd%8dreact%e5%b7%a5%e7%a8%8b%e5%b8%88%e4%bd%93%e9%aa%8c%e4%bd%bf%e7%94%a8react-native\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/zh\/blog\/%e4%b8%80%e4%bd%8dreact%e5%b7%a5%e7%a8%8b%e5%b8%88%e4%bd%93%e9%aa%8c%e4%bd%bf%e7%94%a8react-native\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%b8%80%e4%bd%8dreact%e5%b7%a5%e7%a8%8b%e5%b8%88%e4%bd%93%e9%aa%8c%e4%bd%bf%e7%94%a8react-native\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/zh\/blog\/"},{"@type":"ListItem","position":2,"name":"\u4e00\u4f4dReact\u5de5\u7a0b\u5e08\u4f53\u9a8c\u4f7f\u7528React Native"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website","url":"https:\/\/www.silicloud.com\/zh\/blog\/","name":"Blog - Silicon Cloud","description":"","inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/85c1dae56e6ea1e695c73d33c684d487","name":"\u9038, \u79d1","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c94f6d9cbbfbca863fab309840bd690c153c95f8490c290ad2ed54dd693dad16?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c94f6d9cbbfbca863fab309840bd690c153c95f8490c290ad2ed54dd693dad16?s=96&d=mm&r=g","caption":"\u9038, \u79d1"},"url":"https:\/\/www.silicloud.com\/zh\/blog\/author\/keyi\/"},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%b8%80%e4%bd%8dreact%e5%b7%a5%e7%a8%8b%e5%b8%88%e4%bd%93%e9%aa%8c%e4%bd%bf%e7%94%a8react-native\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38331","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/comments?post=38331"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38331\/revisions"}],"predecessor-version":[{"id":87166,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38331\/revisions\/87166"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=38331"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=38331"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=38331"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}