update styles for react-native.

react-component · Sep 5, 2017 · 5422b34 · 5422b34
1 parent a7559bf
commit 5422b34
Show file tree

Hide file tree

Showing 11 changed files with 72 additions and 56 deletions.
diff --git a/examples/basic.tsx b/examples/basic.tsx
@@ -6,8 +6,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Models, Tabs, DefaultTabBar } from '../src';
 
-const en = location.search.indexOf('en') !== -1;
-
 class BasicDemo extends React.Component<{}, any> {
 
     constructor(props: any) {

diff --git a/examples/react-native/basic.tsx b/examples/react-native/basic.tsx
@@ -23,7 +23,7 @@ const renderContent = (tab: Models.TabData, index: number) =>
     </ScrollView>
     ;
 
-const SwipeoutExample = () => (
+const TabsExample = () => (
     <View style={{ flex: 1 }}>
         <Tabs tabs={[
             { title: 'First Tab' },
@@ -37,5 +37,5 @@ const SwipeoutExample = () => (
     </View>
 );
 
-export const Demo = SwipeoutExample;
+export const Demo = TabsExample;
 export const title = 'Simple';
diff --git a/examples/react-native/scrolltabbar.tsx b/examples/react-native/scrolltabbar.tsx
@@ -5,7 +5,7 @@ import { Tabs, Models } from '../../src';
 import React from 'react';
 
 const renderContent = (tab: Models.TabData, index: number) =>
-    <ScrollView>
+    <ScrollView style={{ backgroundColor: '#fff' }}>
         {
             [1, 2, 3, 4, 5, 6, 7, 8].map(i => <View key={`${index}_${i}`}
                 style={{
@@ -23,7 +23,7 @@ const renderContent = (tab: Models.TabData, index: number) =>
     </ScrollView>
     ;
 
-const SwipeoutExample = () => (
+const TabsExample = () => (
     <View style={{ flex: 1 }}>
         <Tabs tabs={[
             { title: 'First Tab' },
@@ -42,5 +42,5 @@ const SwipeoutExample = () => (
     </View>
 );
 
-export const Demo = SwipeoutExample;
+export const Demo = TabsExample;
 export const title = 'Scroll TabBar';
diff --git a/examples/scroll-tab.tsx b/examples/scroll-tab.tsx
@@ -6,8 +6,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Models, Tabs, DefaultTabBar } from '../src';
 
-const en = location.search.indexOf('en') !== -1;
-
 const tabData = [
     { title: 'tit 1' },
     { title: 'tit 2' },

diff --git a/examples/single-content.tsx b/examples/single-content.tsx
@@ -6,8 +6,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Models, Tabs, DefaultTabBar } from '../src';
 
-const en = location.search.indexOf('en') !== -1;
-
 const tabData = [
     { title: 't1' },
     { title: 't2' },

diff --git a/examples/sticky.tsx b/examples/sticky.tsx
@@ -7,8 +7,6 @@ import ReactDOM from 'react-dom';
 import { StickyContainer, Sticky } from 'react-sticky';
 import { Models, Tabs, DefaultTabBar } from '../src';
 
-const en = location.search.indexOf('en') !== -1;
-
 class BasicDemo extends React.Component<{}, {
 }> {
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rmc-tabs",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "React Mobile Tabs Component(web & react-native)",
   "keywords": [
     "react",

diff --git a/src/DefaultTabBar.native.tsx b/src/DefaultTabBar.native.tsx
@@ -11,6 +11,7 @@ import {
 } from 'react-native';
 import { TabBarPropsType } from './PropsType';
 import { Models } from './Models';
+import Styles from './Styles.native';
 
 const WINDOW_WIDTH = Dimensions.get('window').width;
 
@@ -20,7 +21,7 @@ export interface PropsType extends TabBarPropsType {
     page?: number;
 
     scrollValue?: any;
-    style?: RN.ViewStyle;
+    styles?: typeof Styles;
     tabStyle?: RN.ViewStyle;
     tabsContainerStyle?: RN.ViewStyle;
     /** default: false */
@@ -44,6 +45,7 @@ export class DefaultTabBar extends React.PureComponent<PropsType, StateType> {
         tabBarActiveTextColor: '#108ee9',
         tabBarTextStyle: {},
         dynamicTabUnderlineWidth: false,
+        styles: Styles,
     } as PropsType;
 
     _tabsMeasurements: any[] = [];
@@ -139,6 +141,7 @@ export class DefaultTabBar extends React.PureComponent<PropsType, StateType> {
             tabBarInactiveTextColor: inactiveTextColor,
             tabBarTextStyle: textStyle,
             activeTab, goToTab, renderTab,
+            styles = Styles
         } = this.props;
         const isTabActive = activeTab === index;
         const textColor = isTabActive ? activeTextColor : inactiveTextColor;
@@ -154,7 +157,7 @@ export class DefaultTabBar extends React.PureComponent<PropsType, StateType> {
             onLayout={onLayoutHandler}
         >
             <View style={{
-                ...Styles.tab,
+                ...styles.TabBar.tab,
                 ...this.props.tabStyle,
                 width,
             }}>
@@ -182,7 +185,8 @@ export class DefaultTabBar extends React.PureComponent<PropsType, StateType> {
             tabs, page = 1,
             tabBarUnderlineStyle,
             tabBarActiveTextColor,
-            tabBarBackgroundColor, style,
+            tabBarBackgroundColor,
+            styles = Styles,
             tabsContainerStyle
          } = this.props;
 
@@ -203,9 +207,8 @@ export class DefaultTabBar extends React.PureComponent<PropsType, StateType> {
 
         return <View
             style={{
-                ...Styles.container,
+                ...Styles.TabBar.container,
                 backgroundColor: tabBarBackgroundColor,
-                ...style,
             }}
             onLayout={this.onContainerLayout}
         >
@@ -221,7 +224,7 @@ export class DefaultTabBar extends React.PureComponent<PropsType, StateType> {
             >
                 <View
                     style={{
-                        ...Styles.tabs,
+                        ...styles.TabBar.tabs,
                         ...tabsContainerStyle,
                     }}
                     ref={'tabContainer'}
@@ -265,26 +268,3 @@ export class DefaultTabBar extends React.PureComponent<PropsType, StateType> {
         this.updateView({ value: this.props.scrollValue._value, });
     }
 }
-
-const Styles = {
-    container: {
-        height: 43.5,
-    } as RN.ViewStyle,
-    tabs: {
-        flex: 1,
-        flexDirection: 'row',
-        height: 43.5,
-        backgroundColor: '#fff',
-        justifyContent: 'space-around'
-    } as RN.ViewStyle,
-    tab: {
-        height: 43.5,
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingTop: 0,
-        paddingBottom: 0,
-        paddingRight: 2,
-        paddingLeft: 2,
-        flexDirection: 'row'
-    } as RN.ViewStyle,
-};
diff --git a/src/Styles.native.tsx b/src/Styles.native.tsx
@@ -0,0 +1,39 @@
+import * as RN from 'react-native';
+
+export default {
+    Tabs: {
+        container: {
+            flex: 1,
+        } as RN.ViewStyle,
+        topTabBarSplitLine: {
+            borderBottomColor: '#eee',
+            borderBottomWidth: 1,
+        } as RN.ViewStyle,
+        bottomTabBarSplitLine: {
+            borderTopColor: '#eee',
+            borderTopWidth: 1,
+        } as RN.ViewStyle,
+    },
+    TabBar: {
+        container: {
+            height: 43.5,
+        },
+        tabs: {
+            flex: 1,
+            flexDirection: 'row',
+            height: 43.5,
+            backgroundColor: '#fff',
+            justifyContent: 'space-around',
+        } as RN.ViewStyle,
+        tab: {
+            height: 43.5,
+            alignItems: 'center',
+            justifyContent: 'center',
+            paddingTop: 0,
+            paddingBottom: 0,
+            paddingRight: 2,
+            paddingLeft: 2,
+            flexDirection: 'row'
+        } as RN.ViewStyle,
+    },
+};
diff --git a/src/Tabs.native.tsx b/src/Tabs.native.tsx
@@ -12,6 +12,7 @@ import { PropsType as BasePropsType } from './PropsType';
 import { Tabs as Component, StateType as BaseStateType } from './Tabs.base';
 import { DefaultTabBar } from './DefaultTabBar';
 import { StaticContainer } from './StaticContainer';
+import Styles from './Styles.native';
 
 const TabPane = (Props: any) => {
     const { shouldUpdate, ...props } = Props;
@@ -25,6 +26,7 @@ const TabPane = (Props: any) => {
 export interface PropsType extends BasePropsType {
     children?: any;
     style?: RN.ViewStyle;
+    styles?: typeof Styles;
 }
 export interface StateType extends BaseStateType {
     scrollX: Animated.Value;
@@ -77,7 +79,7 @@ export class Tabs extends Component<PropsType, StateType> {
         const { tabs } = this.props;
         const { currentTab, containerWidth } = this.state;
 
-        return <ScrollView
+        return <ScrollView key="$content"
             horizontal
             pagingEnabled
             automaticallyAdjustContentInsets={false}
@@ -154,7 +156,7 @@ export class Tabs extends Component<PropsType, StateType> {
     }
 
     render() {
-        const { tabBarPosition } = this.props;
+        const { tabBarPosition, styles = Styles } = this.props;
         const { scrollX, scrollValue, containerWidth } = this.state;
         // let overlayTabs = (this.props.tabBarPosition === 'overlayTop' || this.props.tabBarPosition === 'overlayBottom');
         let overlayTabs = false;
@@ -176,18 +178,17 @@ export class Tabs extends Component<PropsType, StateType> {
             // };
         }
 
+        const content = [
+            <View key="$tabbar" style={tabBarPosition === 'top' ? styles.Tabs.topTabBarSplitLine : styles.Tabs.bottomTabBarSplitLine}>
+                {this.renderTabBar(tabBarProps, DefaultTabBar)}
+            </View>,
+            this.renderContent()
+        ];
+
         return <View style={{
-            ...Styles.container, ...this.props.style,
+            ...styles.Tabs.container, ...this.props.style,
         }} onLayout={this.handleLayout}>
-            {tabBarPosition === 'top' && this.renderTabBar(tabBarProps, DefaultTabBar)}
-            {this.renderContent()}
-            {(tabBarPosition === 'bottom' || overlayTabs) && this.renderTabBar(tabBarProps, DefaultTabBar)}
+            {tabBarPosition === 'top' ? content : content.reverse()}
         </View>;
     }
-}
-
-const Styles = {
-    container: {
-        flex: 1,
-    } as RN.ViewStyle,
-};
+}
diff --git a/src/index.native.tsx b/src/index.native.tsx
@@ -0,0 +1,4 @@
+export { Models } from './Models';
+export { PropsType as PropsType, TabBarPropsType } from './PropsType';
+export { Tabs } from './Tabs';
+export { DefaultTabBar } from './DefaultTabBar';