@@ -58,86 +58,10 @@ var App = React.createClass({
5858}
5959` ` `
6060
61- Below is the default tab bar, renamed to CustomTabBar, you can use this
62- as a template for implementing your own.
61+ ## Example
6362
64- ` ` ` javascript
65- var React = require (' react-native' );
66- var {
67- StyleSheet ,
68- Text ,
69- View,
70- TouchableOpacity,
71- } = React;
72-
73- var deviceWidth = require (' Dimensions' ).get (' window' ).width ;
74- var precomputeStyle = require (' precomputeStyle' );
75- var TAB_UNDERLINE_REF = ' TAB_UNDERLINE' ;
76-
77- var styles = StyleSheet .create ({
78- tab: {
79- flex: 1 ,
80- alignItems: ' center' ,
81- justifyContent: ' center' ,
82- paddingBottom: 10 ,
83- },
84-
85- tabs: {
86- height: 50 ,
87- flexDirection: ' row' ,
88- marginTop: 20 ,
89- borderWidth: 1 ,
90- borderTopWidth: 0 ,
91- borderLeftWidth: 0 ,
92- borderRightWidth: 0 ,
93- borderBottomColor: ' #ccc' ,
94- },
95- });
96-
97- var CustomTabBar = React .createClass ({
98- propTypes: {
99- goToPage: React .PropTypes .func ,
100- activeTab: React .PropTypes .number ,
101- tabs: React .PropTypes .array
102- },
103-
104- renderTabOption (name , page ) {
105- var isTabActive = this .props .activeTab === page;
106-
107- return (
108- < TouchableOpacity key= {name} onPress= {() => this .props .goToPage (page)} style= {[styles .tab ]}>
109- < Text style= {{color: isTabActive ? ' navy' : ' black' , fontWeight: isTabActive ? ' bold' : ' normal' }}> {name}< / Text >
110- < / TouchableOpacity>
111- );
112- },
113-
114- setAnimationValue (value ) {
115- this .refs [TAB_UNDERLINE_REF ].setNativeProps (precomputeStyle ({
116- left: (deviceWidth * value) / this .props .tabs .length
117- }));
118- },
119-
120- render () {
121- var numberOfTabs = this .props .tabs .length ;
122- var tabUnderlineStyle = {
123- position: ' absolute' ,
124- width: deviceWidth / numberOfTabs,
125- height: 4 ,
126- backgroundColor: ' navy' ,
127- bottom: 0 ,
128- };
129-
130- return (
131- < View style= {styles .tabs }>
132- {this .props .tabs .map ((tab , i ) => this .renderTabOption (tab, i))}
133- < View style= {tabUnderlineStyle} ref= {TAB_UNDERLINE_REF } / >
134- < / View>
135- );
136- },
137- });
138-
139- module .exports = CustomTabBar;
140- ` ` `
63+ See
64+ [examples/FacebookTabsExample](https://github.com/brentvatne/react-native-scrollable-tab-view/tree/master/examples/FacebookTabsExample).
14165
14266## Props
14367
0 commit comments