aksonov / react-native-tabs

React Native platform-independent tabs. Could be used for bottom tab bars as well as sectioned views (with tab buttons)
Apache License 2.0
727 stars 116 forks source link

Tabs scrolling #50

Open SobolRR opened 7 years ago

SobolRR commented 7 years ago

Can we opportunity horizontally scroll tabs?

powman commented 7 years ago

Usage:

access folder node_modules/react-native-tabs/index.js and add code. 'use strict'; import React, { Component } from 'react'; import { StyleSheet, View, Text, ScrollView, TouchableOpacity, } from 'react-native'; class Tabs extends Component { onSelect(el){ if (el.props.onSelect) { el.props.onSelect(el); } else if (this.props.onSelect) { this.props.onSelect(el); } } render(){ const self = this; let selected = this.props.selected let horizontal = this.props.horizontal if (!selected){ React.Children.forEach(this.props.children.filter(c=>c), el=>{ if (!selected || el.props.initial){ selected = el.props.name || el.key; } }); } if(!horizontal){ return ( {React.Children.map(this.props.children.filter(c=>c),(el)=> !self.props.locked && self.onSelect(el)} onLongPress={()=>self.onSelect(el)} activeOpacity={el.props.pressOpacity}> {selected == (el.props.name || el.key) ? React.cloneElement(el, {selected: true, style: [el.props.style, this.props.selectedStyle, el.props.selectedStyle]}) : el} )} ); }else{ return ( {React.Children.map(this.props.children.filter(c=>c),(el)=> !self.props.locked && self.onSelect(el)} onLongPress={()=>self.onSelect(el)} activeOpacity={el.props.pressOpacity}> {selected == (el.props.name || el.key) ? React.cloneElement(el, {selected: true, style: [el.props.style, this.props.selectedStyle, el.props.selectedStyle]}) : el} )} ); } } } var styles = StyleSheet.create({ tabbarView: { position:'absolute', bottom:0, right:0, left:0, height:50, opacity:1, backgroundColor:'transparent', flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }, tabbarViewScroll: { position:'absolute', bottom:0, right:0, left:0, height:50, opacity:1, backgroundColor:'transparent', flexDirection: 'row', }, iconView: { flex: 1, height: 50, justifyContent: 'center', alignItems: 'center', } }); module.exports = Tabs;
powman commented 7 years ago

Param in tab horizontal={true}

rajscet commented 6 years ago

love you thanks