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

install

npm install react-native-tabscrollview --save

Props

data: Array

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

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

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

tabContainerStyle: style 自定义tab样式

example

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View
} 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>
        }]}/>
      </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