{"id":190978,"date":"2023-08-20T23:48:13","date_gmt":"2023-08-20T15:48:13","guid":{"rendered":"https:\/\/www.idc.net\/help\/190978\/"},"modified":"2023-08-20T23:48:13","modified_gmt":"2023-08-20T15:48:13","slug":"%e5%90%8e%e6%b5%aa%e4%ba%91react%e6%95%99%e7%a8%8b%ef%bc%9aios-%e9%80%89%e9%a1%b9%e5%8d%a1","status":"publish","type":"post","link":"https:\/\/idc.net\/help\/190978\/","title":{"rendered":"\u540e\u6d6a\u4e91React\u6559\u7a0b\uff1aiOS \u9009\u9879\u5361"},"content":{"rendered":"<h2>\u5c5e\u6027<\/h2>\n<p style=\"margin: 0px 0px 10px;line-height: 26px\">Edit on GitHub<\/p>\n<p style=\"margin: 0px 0px 10px;line-height: 26px\"><strong>style<\/strong><span>&nbsp;<\/span>View#style<\/p>\n<h2>\u4f8b\u5b50<\/h2>\n<p style=\"margin: 0px 0px 10px;line-height: 26px\">Edit on GitHub<\/p>\n<pre>'use&nbsp;strict';var&nbsp;React&nbsp;=&nbsp;require('react-native');var&nbsp;{\n&nbsp;&nbsp;StyleSheet,\n&nbsp;&nbsp;TabBarIOS,\n&nbsp;&nbsp;Text,\n&nbsp;&nbsp;View,\n}&nbsp;=&nbsp;React;var&nbsp;TabBarExample&nbsp;=&nbsp;React.createClass({&nbsp;&nbsp;statics:&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;title:&nbsp;'&lt;TabBarIOS&gt;',&nbsp;&nbsp;&nbsp;&nbsp;description:&nbsp;'Tab-based&nbsp;navigation.'\n&nbsp;&nbsp;},&nbsp;&nbsp;getInitialState:&nbsp;function()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;selectedTab:&nbsp;'redTab',&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notifCount:&nbsp;0,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;presses:&nbsp;0,\n&nbsp;&nbsp;&nbsp;&nbsp;};\n&nbsp;&nbsp;},&nbsp;&nbsp;_renderContent:&nbsp;function(color:&nbsp;string,&nbsp;pageText:&nbsp;string)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;(\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;View&nbsp;style={[styles.tabContent,&nbsp;{backgroundColor:&nbsp;color}]}&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;Text&nbsp;style={styles.tabText}&gt;{pageText}&lt;\/Text&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;Text&nbsp;style={styles.tabText}&gt;{this.state.presses}&nbsp;re-renders&nbsp;of&nbsp;the&nbsp;More&nbsp;tab&lt;\/Text&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/View&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;);\n&nbsp;&nbsp;},&nbsp;&nbsp;render:&nbsp;function()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;(\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;TabBarIOS&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;TabBarIOS.Item\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;title=\"Blue&nbsp;Tab\"\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;selected={this.state.selectedTab&nbsp;===&nbsp;'blueTab'}\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onPress={()&nbsp;=&gt;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.setState({&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;selectedTab:&nbsp;'blueTab',\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}}&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{this._renderContent('#414A8C',&nbsp;'Blue&nbsp;Tab')}\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/TabBarIOS.Item&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;TabBarIOS.Item\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;systemIcon=\"history\"\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;badge={this.state.notifCount&nbsp;&gt;&nbsp;0&nbsp;?&nbsp;this.state.notifCount&nbsp;:&nbsp;undefined}\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;selected={this.state.selectedTab&nbsp;===&nbsp;'redTab'}\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onPress={()&nbsp;=&gt;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.setState({&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;selectedTab:&nbsp;'redTab',&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notifCount:&nbsp;this.state.notifCount&nbsp;+&nbsp;1,\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}}&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{this._renderContent('#783E33',&nbsp;'Red&nbsp;Tab')}\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/TabBarIOS.Item&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;TabBarIOS.Item\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;systemIcon=\"more\"\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;selected={this.state.selectedTab&nbsp;===&nbsp;'greenTab'}\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onPress={()&nbsp;=&gt;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.setState({&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;selectedTab:&nbsp;'greenTab',&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;presses:&nbsp;this.state.presses&nbsp;+&nbsp;1\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}}&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{this._renderContent('#21551C',&nbsp;'Green&nbsp;Tab')}\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/TabBarIOS.Item&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/TabBarIOS&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;);\n&nbsp;&nbsp;},\n});var&nbsp;styles&nbsp;=&nbsp;StyleSheet.create({&nbsp;&nbsp;tabContent:&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;flex:&nbsp;1,&nbsp;&nbsp;&nbsp;&nbsp;alignItems:&nbsp;'center',\n&nbsp;&nbsp;},&nbsp;&nbsp;tabText:&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;'white',&nbsp;&nbsp;&nbsp;&nbsp;margin:&nbsp;50,\n&nbsp;&nbsp;},\n});module.exports&nbsp;=&nbsp;TabBarExample;<\/pre>\n<p> <\/p>\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u5c5e\u6027 Edit on GitHub style&nbsp;View#style \u4f8b\u5b50 Edit on GitH [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[182398],"tags":[],"class_list":["post-190978","post","type-post","status-publish","format-standard","hentry","category-mini-program"],"_links":{"self":[{"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/posts\/190978","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/comments?post=190978"}],"version-history":[{"count":0,"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/posts\/190978\/revisions"}],"wp:attachment":[{"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/media?parent=190978"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/categories?post=190978"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/tags?post=190978"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}