Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-native-tabscrollview with all npm packages installed. Try it out:

var reactNativeTabscrollview = require("react-native-tabscrollview")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-native-tabscrollview v1.0.4

similar to taobao app products page

react-native-tabscrollview npm version


npm install react-native-tabscrollview --save


data: Array

    tabName // 标签名称,自定义时可不传
    scrollViewChildren // 对应标签子模块,必传
    customTab // 自定义标签
    customTabHighlight // 自定义标签高亮

hideTab: boolean 是否隐藏tab,默认为false

canScrollOut: boolean 当点击tab时对应的模块不足一页时,能否将该模块滚动到顶,默认为true

tabContainerStyle: style 自定义tab样式


import React, { Component } from 'react';
import {
} from 'react-native';
import TabScrollView from 'react-native-tabscrollview'

export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <TabScrollView data={[{
          tabName: '宝贝',
          scrollViewChildren: <View style={{ height: 300, backgroundColor: 'red' }}></View>
        }, {
          customTab: <Text style={[{ textAlign: 'center', backgroundColor: 'red' }]}>评价</Text>,
          customTabHighlight: <Text
            style={[{ textAlign: 'center', backgroundColor: 'yellow' }]}>评价</Text>,
          scrollViewChildren: <View style={{ height: 700, backgroundColor: 'yellow' }}></View>
        }, {
          tabName: '详情',
          scrollViewChildren: <View style={{ height: 800, backgroundColor: 'blue' }}></View>
        }, {
          tabName: '推荐',
          scrollViewChildren: <View style={{ height: 900, backgroundColor: 'green' }}></View>

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    paddingTop: 50,
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free