{"id":524,"date":"2023-02-25T15:40:59","date_gmt":"2023-02-25T07:40:59","guid":{"rendered":"https:\/\/www.appblog.cn\/?p=524"},"modified":"2023-04-29T20:42:57","modified_gmt":"2023-04-29T12:42:57","slug":"react-native-universal-tab-component-react-native-scrollable-tab-view-getstarting","status":"publish","type":"post","link":"https:\/\/www.appblog.cn\/index.php\/2023\/02\/25\/react-native-universal-tab-component-react-native-scrollable-tab-view-getstarting\/","title":{"rendered":"React Native\u901a\u7528Tab\u7ec4\u4ef6react-native-scrollable-tab-view\u521d\u63a2"},"content":{"rendered":"

react-native-scrollable-tab-view \u7b80\u4ecb<\/h2>\n

\u540c\u65f6\u9002\u914d Android & iOS<\/p>\n

\u5f00\u6e90\u9879\u76ee\u5730\u5740\uff1ahttps:\/\/github.com\/skv-headless\/react-native-scrollable-tab-view<\/a><\/p>\n

<\/p>\n

\u7ec4\u4ef6\u5b89\u88c5<\/p>\n

npm i react-native-scrollable-tab-view --save --force<\/code><\/pre>\n
\u7ec4\u4ef6\u4f7f\u7528<\/p>\n
import ScrollableTabView from 'react-native-scrollable-tab-view';<\/code><\/pre>\n
\u5c5e\u6027\u53ca\u65b9\u6cd5\u4ecb\u7ecd<\/h2>\n
tabLabel<\/h3>\n
\u6bcf\u4e2a\u88ab\u5305\u542b\u7684\u5b50\u89c6\u56fe\u9700\u8981\u4f7f\u7528tabLabel\u5c5e\u6027\uff0c\u8868\u793a\u5bf9\u5e94Tab\u663e\u793a\u7684\u6587\u5b57<\/p>\n
renderTabBar<\/h3>\n
renderTabBar={() => <DefaultTabBar\/>}<\/code><\/pre>\n
TabBar\u7684\u6837\u5f0f\uff0c\u7cfb\u7edf\u63d0\u4f9b\u4e86\u4e24\u79cd\u9ed8\u8ba4\u7684\uff0c\u5206\u522b\u662fDefaultTabBar\u548cScrollableTabBar\uff0c\u4e5f\u53ef\u4ee5\u81ea\u5b9a\u4e49\u3002<\/p>\n
    \n
  • DefaultTabBar<\/code>\uff1aTab\u4f1a\u5e73\u5206\u5728\u6c34\u5e73\u65b9\u5411\u7684\u7a7a\u95f4<\/li>\n
  • ScrollableTabBar<\/code>\uff1aTab\u53ef\u4ee5\u8d85\u8fc7\u5c4f\u5e55\u8303\u56f4\uff0c\u6eda\u52a8\u53ef\u4ee5\u663e\u793a<\/li>\n<\/ul>\n
    tabBarPosition<\/h3>\n
    \u4f4d\u7f6e\u9ed8\u8ba4\u4e3a’top’<\/p>\n
    tabBarPosition='top' ['top','bottom','overlayTop','overlayBottom']<\/code><\/pre>\n
    onChangeTab<\/h3>\n
    Tab\u5207\u6362\u4e4b\u540e\u4f1a\u89e6\u53d1\u6b64\u65b9\u6cd5\uff0c\u5305\u542b\u4e00\u4e2a\u53c2\u6570\uff08Object\u7c7b\u578b\uff09\uff0c\u8fd9\u4e2a\u5bf9\u8c61\u6709\u4e24\u4e2a\u53c2\u6570<\/p>\n
      \n
    • i<\/code>\uff1a\u88ab\u9009\u4e2d\u7684Tab\u7684\u4e0b\u6807\uff08\u4ece0\u5f00\u59cb\uff09<\/li>\n
    • ref<\/code>\uff1a\u88ab\u9009\u4e2d\u7684Tab\u5bf9\u8c61\uff08\u57fa\u672c\u7528\u4e0d\u5230\uff09<\/li>\n<\/ul>\n
      onScroll<\/h3>\n
      \u89c6\u56fe\u6b63\u5728\u6ed1\u52a8\u7684\u65f6\u5019\u89e6\u53d1\u6b64\u65b9\u6cd5\uff0c\u5305\u542b\u4e00\u4e2aFloat\u7c7b\u578b\u7684\u6570\u5b57\uff0c\u8303\u56f4\u662f [0, tab\u6570\u91cf-1]<\/p>\n
      locked<\/h3>\n
      \u8868\u793a\u624b\u6307\u662f\u5426\u80fd\u62d6\u52a8\u89c6\u56fe\uff0c\u9ed8\u8ba4\u4e3afalse\uff08\u8868\u793a\u53ef\u4ee5\u62d6\u52a8\uff09\u3002\u8bbe\u4e3atrue\u7684\u8bdd\uff0c\u6211\u4eec\u53ea\u80fd\u201c\u70b9\u51fb\u201dTab\u6765\u5207\u6362\u89c6\u56fe\u3002<\/p>\n
      initialPage<\/h3>\n
      \u521d\u59cb\u5316\u65f6\u88ab\u9009\u4e2d\u7684Tab\u4e0b\u6807\uff0c\u9ed8\u8ba4\u662f0\uff08\u5373\u7b2c\u4e00\u9875\uff09<\/p>\n
      page(Integer)<\/h3>\n
      \u8bbe\u7f6e\u9009\u4e2d\u6307\u5b9a\u7684Tab\uff0c\u4f5c\u8005\u6253\u7b97\u5e9f\u9664<\/p>\n
      children(ReactComponents)<\/h3>\n
      \u8868\u793a\u6240\u6709\u5b50\u89c6\u56fe\u7684\u6570\u7ec4<\/p>\n
      tabBarUnderlineStyle(View.propTypes.style)<\/h3>\n
      \u8bbe\u7f6e DefaultTabBar \u548c ScrollableTabBarTab \u9009\u4e2d\u65f6\u4e0b\u65b9\u6a2a\u7ebf\u7684\u6837\u5f0f<\/p>\n
      tabBarBackgroundColor(String)<\/h3>\n
      \u8bbe\u7f6e\u6574\u4e2aTab\u680f\u7684\u80cc\u666f\u989c\u8272<\/p>\n
      tabBarActiveTextColor(String)<\/h3>\n
      \u8bbe\u7f6e\u9009\u4e2dTab\u7684\u6587\u5b57\u989c\u8272<\/p>\n
      tabBarInactiveTextColor(String)<\/h3>\n
      \u8bbe\u7f6e\u672a\u9009\u4e2dTab\u7684\u6587\u5b57\u989c\u8272<\/p>\n
      tabBarTextStyle(Object)<\/h3>\n
      \u8bbe\u7f6eTab\u6587\u5b57\u7684\u6837\u5f0f\uff0c\u6bd4\u5982\u5b57\u53f7\u3001\u5b57\u4f53\u7b49<\/p>\n
      style(View.propTypes.style)<\/h3>\n
      \u7cfb\u7edfView\u90fd\u62e5\u6709\u7684\u5c5e\u6027<\/p>\n
      contentProps(Object)<\/h3>\n
      react-native-scrollable-tab-view<\/code>\u7684\u5b9e\u73b0\uff0c\u5176\u5b9e\u5728Android\u5e73\u53f0\u5e95\u5c42\u7528\u7684\u662fViewPagerAndroid\uff0ciOS\u5e73\u53f0\u7528\u7684\u662fScrollView\u3002\u8fd9\u4e2a\u5c5e\u6027\u7684\u610f\u4e49\u662f\uff1a\u6bd4\u5982\u6211\u4eec\u8bbe\u7f6e\u4e86\u67d0\u4e2a\u5c5e\u6027\uff0c\u6700\u540e\u8fd9\u4e2a\u5c5e\u6027\u4f1a\u88ab\u5e94\u7528\u5728ScrollView\/ViewPagerAndroid\uff0c\u8fd9\u6837\u4f1a\u8986\u76d6\u5e93\u91cc\u9762\u9ed8\u8ba4\u7684\uff0c\u901a\u5e38\u5b98\u65b9\u4e0d\u5efa\u8bae\u6211\u4eec\u53bb\u4f7f\u7528\u3002<\/p>\n
      scrollWithoutAnimation(Bool\uff0c\u9ed8\u8ba4\u4e3afalse)<\/h3>\n
      \u8bbe\u7f6e\u201c\u70b9\u51fb\u201dTab\u65f6\uff0c\u89c6\u56fe\u5207\u6362\u662f\u5426\u6709\u52a8\u753b\uff0c\u9ed8\u8ba4\u4e3afalse\uff08\u5373\uff1a\u6709\u52a8\u753b\u6548\u679c\uff09\u8fd9\u4e2a\u5c5e\u6027\u7684\u8bbe\u7f6e\u5bf9\u6ed1\u52a8\u89c6\u56fe\u5207\u6362\u7684\u52a8\u753b\u6548\u679c\u6ca1\u6709\u5f71\u54cd\uff0c\u4ec5\u4ec5\u5bf9\u201c\u70b9\u51fb\u201dTab\u6548\u679c\u6709\u4f5c\u7528<\/p>\n
      prerenderingSiblingsNumber(Integer\uff0c\u9ed8\u8ba4\u4e3a0)<\/h3>\n
      \u9884\u6e32\u67d3\u9644\u4ef6\u89c6\u56fe\u7684\u4e2a\u6570 \u4e3a0\u53ea\u6e32\u67d3\u5f53\u524d\u9875<\/p>\n
      \u8303\u4f8b\u6e90\u7801<\/h2>\n
      index.android.js & index.ios.js<\/p>\n
      \/**\n * Sample React Native App\n * https:\/\/github.com\/facebook\/react-native\n * @flow\n *\/\n\nimport React, { Component } from 'react';\nimport {\n    AppRegistry,\n    StyleSheet,\n    Text,\n    View\n} from 'react-native';\n\nimport ScrollableTabView, {DefaultTabBar, ScrollableTabBar} from 'react-native-scrollable-tab-view';\n\nclass RNAPP extends Component {\n    render() {\n        return (\n            <ScrollableTabView\n                renderTabBar={() => <ScrollableTabBar\/>}\n                tabBarPosition='overlayTop'\n\n                onChangeTab={\n                    (obj)=>{\n                        console.log('\u88ab\u9009\u4e2d\u7684tab\u4e0b\u6807\uff1a' + obj.i);\n                    }\n                }\n\n                onScroll={\n                    (position)=>{\n                        console.log('\u6ed1\u52a8\u4f4d\u7f6e\uff1a' + position);\n                    }\n                }\n                locked={false}\n                initialPage={0}\n                tabBarUnderlineStyle={{backgroundColor: '#3BC1FF'}}\n                tabBarActiveTextColor='#3BC1FF'\n                tabBarTextStyle={{fontSize:14}}\n                prerenderingSiblingsNumber={1}\n                >\n                <View tabLabel="RNAPP.CC" style={styles.center}>\n                    <Text >\u5185\u5bb9\uff1aRNAPP.CC<\/Text>\n                <\/View>\n                <View tabLabel="ReactNative" style={styles.center}>\n                    <Text >\u5185\u5bb9\uff1aReactNative<\/Text>\n                <\/View>\n                <View tabLabel="Android" style={styles.center}>\n                    <Text >\u5185\u5bb9\uff1aAndroid<\/Text>\n                <\/View>\n                <View tabLabel="iOS" style={styles.center}>\n                    <Text >\u5185\u5bb9\uff1aiOS<\/Text>\n                <\/View>\n                <View tabLabel="APP\u5f00\u53d1" style={styles.center}>\n                    <Text >\u5185\u5bb9\uff1aAPP\u5f00\u53d1<\/Text>\n                <\/View>\n            <\/ScrollableTabView>\n        );\n    }\n}\n\nconst styles = StyleSheet.create({\n    container: {\n        flex: 1,\n        justifyContent: 'center',\n        alignItems: 'center',\n        backgroundColor: '#F5FCFF',\n    },\n    center: {\n        flex: 1,\n        justifyContent: 'center',\n        alignItems: 'center',\n    },\n    welcome: {\n        fontSize: 20,\n        textAlign: 'center',\n        margin: 10,\n    },\n    instructions: {\n        textAlign: 'center',\n        color: '#333333',\n        marginBottom: 5,\n    },\n});\n\nAppRegistry.registerComponent('RNAPP', () => RNAPP);<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
      react-native-scrollable-tab-view \u7b80\u4ecb \u540c\u65f6\u9002\u914d Android &  […]<\/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-524","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\/524","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=524"}],"version-history":[{"count":0,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/524\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/media?parent=524"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/categories?post=524"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/tags?post=524"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}