react-native-scrollable-tab-view DefaultTabBarProps style (#37551)

* react-native-scrollable-tab-view DefaultTabBarProps missing style

* 【react-native-scrollable-tab-view】DefaultTabBar component modify style would be simpler
This commit is contained in:
maroon
2019-08-21 02:43:35 +08:00
committed by Sheetal Nandi
parent fea56cdd61
commit 8b375da0fe
2 changed files with 25 additions and 8 deletions

View File

@@ -130,13 +130,14 @@ export type TabProps<T = {}> = T & {
};
export interface DefaultTabBarProps {
backgroundColor?: string;
activeTextColor?: string;
inactiveTextColor?: string;
textStyle?: TextStyle;
tabStyle?: ViewStyle;
renderTab?: RenderTabProperties;
underlineStyle?: ViewStyle;
backgroundColor?: string;
activeTextColor?: string;
inactiveTextColor?: string;
textStyle?: TextStyle;
tabStyle?: ViewStyle;
renderTab?: RenderTabProperties;
underlineStyle?: ViewStyle;
style?: ViewStyle;
}
export type RenderTabProperties =

View File

@@ -1,6 +1,6 @@
import * as React from 'react';
import { Text, TextStyle, View, ViewStyle } from 'react-native';
import ScrollableTabView, { ScrollableTabBar, TabProps } from 'react-native-scrollable-tab-view';
import ScrollableTabView, { ScrollableTabBar, TabProps, DefaultTabBar } from 'react-native-scrollable-tab-view';
interface MyTextProps {
style?: TextStyle;
@@ -35,3 +35,19 @@ const TabView1 = () => (
<MyView tabLabel='Tab #5'><Text>project</Text></MyView>
</ScrollableTabView>
);
const DefaultTabBarView2 = () => (
<ScrollableTabView
style={{ marginTop: 20, }}
initialPage={0}
renderTabBar={() => <DefaultTabBar style={{
height: 35, paddingTop: 5, backgroundColor: '#FFFFFF', borderWidth: 1
}}/>}
>
<MyText tabLabel='Tab #1'>My</MyText>
<MyText tabLabel='Tab #2 word word'>favorite</MyText>
<MyText tabLabel='Tab #3 word word word'>project</MyText>
<MyView tabLabel='Tab #4 word word word word'><Text>favorite</Text></MyView>
<MyView tabLabel='Tab #5'><Text>project</Text></MyView>
</ScrollableTabView>
);