{"id":5570,"date":"2016-11-28T23:23:46","date_gmt":"2016-11-28T15:23:46","guid":{"rendered":"https:\/\/sdeno.com\/?p=5570"},"modified":"2016-11-28T23:45:32","modified_gmt":"2016-11-28T15:45:32","slug":"%e4%b8%bareact-native%e6%b7%bb%e5%8a%a0%e5%af%bc%e8%88%aa%ef%bc%8dreact-native-vector-icons","status":"publish","type":"post","link":"https:\/\/sdeno.com\/?p=5570","title":{"rendered":"\u4e3areact native\u6dfb\u52a0\u5bfc\u822a\uff0dreact-native-vector-icons"},"content":{"rendered":"

react native\u6709\u81ea\u5df1\u63d0\u4f9b\u7684\u5bfc\u822a\u6761\uff0c\u4f46\u662f\u8fd9\u91cc\u63a8\u8350\u4f7f\u7528react-native-vector-icons<\/p>\n

 <\/p>\n

\u6309\u7167\u4ee5\u4e0b\u6b65\u9aa4\u8fdb\u884c\uff1a<\/p>\n

sudo npm i react-native-vector-icons@2.0.2 --save\r\nsudo npm i rnpm@1.9.0 -g\r\n\u4e0b\u8f7d\u597d\u6a21\u5757\u4e4b\u540e\u8fd8\u4e0d\u80fd\u76f4\u63a5\u4f7f\u7528\uff0c\u8981\u6267\u884c\u4e00\u4e0b\u6b65\u9aa4\u7684\u5176\u4e2d\u4e4b\u4e00\r\nsudo react-native link react-native-vector-icons \/\/\u5148\u5c1d\u8bd5\u8fd9\u6761\r\nrnpm link react-native-vector-icons\/\/\u4e0a\u9762\u4e0d\u6210\u529f\u5728\u5c1d\u8bd5\u8fd9\u6837<\/pre>\n
 <\/p>\n
\u6210\u529f\u63d0\u793a\uff1a<\/p>\n
rnpm-install<\/span>info<\/span>Android module react-native-vector-icons is already linked<\/span>\u00a0<\/span><\/p>\n
rnpm-install<\/span>info<\/span>iOS module react-native-vector-icons is already linked<\/span>\u00a0<\/span><\/p>\n
rnpm-install<\/span>info<\/span>Linking assets to ios project<\/span>\u00a0<\/span><\/p>\n
rnpm-install<\/span>info<\/span>Linking assets to android project<\/span>\u00a0<\/span><\/p>\n
rnpm-install<\/span>info<\/span>Assets have been successfully linked to your project<\/span>\u00a0<\/span><\/p>\n
 <\/p>\n
\u60f3\u8981\u4ec0\u4e48\u56fe\u6807\u5c31\u81ea\u5df1\u53bb\u5bf9\u5e94\u7684\u627e\u540d\u79f0\uff1a<\/p>\n
http:\/\/fontawesome.io\/icons\/\u00a0<\/a><\/p>\n
 <\/p>\n
\u7528\u6cd5\u53ef\u4ee5\u53c2\u8003\uff1a<\/p>\n
https:\/\/github.com\/oblador\/react-native-vector-icons<\/a><\/p>\n
 <\/p>\n
\u6848\u4f8b\uff1a<\/p>\n
var Icon=require('react-native-vector-icons\/FontAwesome');\r\n\r\nvar {\r\n AppRegistry,\r\n StyleSheet,\r\n TabBarIOS<\/span>,\r\n Text,\r\n View\r\n} = react_native;\r\n\r\n_renderContent: function(color: string, pageText: string, num?: number) {\r\n return (\r\n   <View style={[styles.container, {backgroundColor: color}]}>\r\n    <Text style={styles.tabText}>{pageText}<\/Text>\r\n    <Text style={styles.tabText}>{num} re-renders of the {pageText}<\/Text>\r\n   <\/View>\r\n );\r\n}\r\n\r\nreturn (\r\n <TabBarIOS\r\n   tintColor=\"white\"\r\n   barTintColor=\"darkslateblue\">\r\n     <Icon.TabBarItem\r\n      title=\"\u641c\u7d22\"\r\n      iconName=\"search\"\r\n      selectedIconName=\"search\"\r\n      selected={this.state.selectedTab === 'blueTab'}\r\n      onPress={() => {\r\n        this.setState({\r\n          selectedTab: 'blueTab',\r\n        });\r\n      }}>\r\n      {this._renderContent('#fff', 'Blue Tab')}\r\n     <\/Icon.TabBarItem>\r\n\r\n    <Icon.TabBarItem\r\n      title=\"\u641c\u7d22\"\r\n      iconName=\"search\"\r\n      selectedIconName=\"search\"\r\n      selected={this.state.selectedTab === 'redTab'}\r\n      onPress={() => {\r\n        this.setState({\r\n          selectedTab: 'redTab',\r\n          notifCount: this.state.notifCount + 1,\r\n        });\r\n      }}>\r\n      {this._renderContent('#fff', 'Red Tab', this.state.notifCount)}\r\n     <\/Icon.TabBarItem>\r\n\r\n     <Icon.TabBarItem\r\n       title=\"\u641c\u7d22\"\r\n       iconName=\"search\"\r\n       selectedIconName=\"search\"\r\n       selected={this.state.selectedTab === 'greenTab'}\r\n       onPress={() => {\r\n          this.setState({\r\n            selectedTab: 'greenTab',\r\n            presses: this.state.presses + 1\r\n          });\r\n       }}>\r\n       {this._renderContent('#fff', 'Green Tab', this.state.presses)}\r\n      <\/Icon.TabBarItem>\r\n  <\/TabBarIOS>\r\n);<\/pre>\n
\u6ce8\u610f\uff1aTabBarIOS\u662freact native\u81ea\u5e26\uff0c\u8bb0\u5f97\u8981\u63a5\u53e3\u58f0\u660e\u51fa\u6765<\/p>\n
\u5982\u679c\u9047\u5230\u6a21\u5757\u4e0b\u8f7d\u4e86\u6ca1\u6709\u52a0\u8f7d\u51fa\u6765\u5c31\u53c2\u8003\uff1a\u300a\u89e3\u51b3\uff1areact native\u627e\u4e0d\u5230\u52a0\u8f7d\u6a21\u5757<\/a>\u300b<\/p>\n","protected":false},"excerpt":{"rendered":"
react native\u6709\u81ea\u5df1\u63d0\u4f9b\u7684\u5bfc\u822a\u6761\uff0c\u4f46\u662f\u8fd9\u91cc\u63a8\u8350\u4f7f\u7528react-native-vector-icons […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[43],"tags":[],"class_list":["post-5570","post","type-post","status-publish","format-standard","hentry","category-react-native"],"_links":{"self":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/5570","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5570"}],"version-history":[{"count":0,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/5570\/revisions"}],"wp:attachment":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5570"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=5570"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=5570"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}