{"id":499,"date":"2023-02-25T14:17:12","date_gmt":"2023-02-25T06:17:12","guid":{"rendered":"https:\/\/www.appblog.cn\/?p=499"},"modified":"2023-04-29T20:49:12","modified_gmt":"2023-04-29T12:49:12","slug":"react-native-learning-open-source-tab-navigation-component-react-native-tab-navigator","status":"publish","type":"post","link":"https:\/\/www.appblog.cn\/index.php\/2023\/02\/25\/react-native-learning-open-source-tab-navigation-component-react-native-tab-navigator\/","title":{"rendered":"React Native\u5b66\u4e60\u4e4b\u5f00\u6e90Tab\u5bfc\u822a\u7ec4\u4ef6react-native-tab-navigator"},"content":{"rendered":"<p>\u5f00\u6e90\u7ec4\u4ef6<code>react-native-tab-navigator<\/code>\uff1a<a target=\"_blank\" rel=\"noopener\" href=\"https:\/\/github.com\/exponentjs\/react-native-tab-navigator\">https:\/\/github.com\/exponentjs\/react-native-tab-navigator<\/a><\/p>\n<p>\u5b89\u88c5\uff1a<code>npm install react-native-tab-navigator --save<\/code><br \/>\n\u4f7f\u7528\uff1a<code>import TabNavigator from &#039;react-native-tab-navigator&#039;;<\/code><\/p>\n<p><!-- more --><\/p>\n<p>React Native \u539f\u751f\u7684\u63a7\u4ef6\u4ec5\u6709 TabBarIOS \u53ef\u4f9b iOS \u5e73\u53f0\u4f7f\u7528\u3002<\/p>\n<p>\u800c<code>react-native-tab-navigator<\/code>\u8de8\u5e73\u53f0\uff0c\u7eaf js \u5f00\u53d1\uff0c\u540c\u65f6\u652f\u6301 Android \u4e0e iOS<\/p>\n<p>\u8303\u4f8b\uff1a<\/p>\n<pre><code class=\"language-javascript\">\/**\n * Sample React Native App\n * https:\/\/github.com\/facebook\/react-native\n *\/\n\nimport React, { Component } from &#039;react&#039;;\nimport {\n    AppRegistry,\n    StyleSheet,\n    Text,\n    Image,\n    View,\n} from &#039;react-native&#039;;\n\nimport TabNavigator from &#039;react-native-tab-navigator&#039;;\n\nclass RNAPP extends Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            selectedTab: &#039;home&#039;,\n        };\n    }\n\n    render() {\n        var homeView = (\n            &lt;View style={[styles.flex, styles.center,{backgroundColor:&#039;#ffff0044&#039;}]}&gt;\n                &lt;Text style={{ fontSize: 22 }}&gt;\u6211\u662f\u4e3b\u9875&lt;\/Text&gt;\n            &lt;\/View&gt;\n        );\n\n        var settingView = (\n            &lt;View style={[styles.flex, styles.center,{backgroundColor:&#039;#ff000044&#039;}]}&gt;\n                &lt;Text style={{ fontSize: 22 }}&gt;\u6211\u662f\u8bbe\u7f6e\u9875&lt;\/Text&gt;\n            &lt;\/View&gt;\n        );\n\n        return (\n            &lt;TabNavigator\n                tabBarStyle={{ height: 60 }}\n                &gt;\n                &lt;TabNavigator.Item\n                    selected={this.state.selectedTab === &#039;home&#039;}\n                    title=&quot;\u4e3b\u9875&quot;\n                    renderIcon={() =&gt; &lt;Image style={styles.img} source={require(&#039;.\/home_tab_home_normal.png&#039;) }\/&gt;}\n                    renderSelectedIcon={() =&gt; &lt;Image style={styles.img} source={require(&#039;.\/home_tab_home_pressed.png&#039;) }\/&gt;}\n                    badgeText=&quot;200&quot;\n                    onPress={() =&gt; this.setState({ selectedTab: &#039;home&#039; })}\n                    &gt;\n                    {homeView}\n                &lt;\/TabNavigator.Item&gt;\n\n                &lt;TabNavigator.Item\n                    selected={this.state.selectedTab === &#039;setting&#039;}\n                    title=&quot;\u8bbe\u7f6e&quot;\n                    renderIcon={() =&gt; &lt;Image style={styles.img} source={require(&#039;.\/home_tab_setting_normal.png&#039;) }\/&gt;}\n                    renderSelectedIcon={() =&gt; &lt;Image style={styles.img} source={require(&#039;.\/home_tab_setting_pressed.png&#039;) }\/&gt;}\n                    renderBadge={() =&gt; &lt;Text&gt;RNAPP.CC&lt;\/Text&gt;}\n                    onPress={() =&gt; this.setState({ selectedTab: &#039;setting&#039; })}\n                    &gt;\n                    {settingView}\n                &lt;\/TabNavigator.Item&gt;\n            &lt;\/TabNavigator&gt;\n        );\n    }\n}\n\nconst styles = StyleSheet.create({\n    flex: {\n        flex: 1,\n    },\n    img: {\n        width: 40,\n        height: 33,\n    },\n    center: {\n        justifyContent: &#039;center&#039;,\n        alignItems: &#039;center&#039;,\n    },\n});\n\nAppRegistry.registerComponent(&#039;RNAPP&#039;, () =&gt; RNAPP);<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\u5f00\u6e90\u7ec4\u4ef6react-native-tab-navigator\uff1ahttps:\/\/github.com\/expon [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[163],"tags":[],"class_list":["post-499","post","type-post","status-publish","format-standard","hentry","category-react-native"],"_links":{"self":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/499","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/comments?post=499"}],"version-history":[{"count":0,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/499\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/media?parent=499"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/categories?post=499"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/tags?post=499"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}