license import React from 'react' ; import { StyleProp , StyleSheet , View , ViewProps , ViewStyle , } from 'react-native' ; import { ChildrenWithProps } from '../../devsupport' ; import { TabElement , TabProps , } from './tab.component' ; import { TabBar } from './tabBar.component' ; import { ViewPager , ViewPagerProps , } from '../viewPager/viewPager.component' ; class TabViewChildElement { tab : TabElement ; content : React . ReactElement ; } class TabViewChildren { tabs : TabElement [ ] = [ ] ; contents : React . ReactElement [ ] = [ ] ; } export interface TabViewProps extends ViewPagerProps < TabProps > { tabBarStyle ? : StyleProp < ViewStyle > ; indicatorStyle ? : StyleProp < ViewStyle > ; } export type TabViewElement = React . ReactElement < TabViewProps > ; extends React . Component property property property property property property property property overview-example overview-example export class TabView extends React . Component < TabViewProps > { static defaultProps : Partial < TabViewProps > = { selectedIndex : 0 , } ; private viewPagerRef = React . createRef < ViewPager > ( ) ; private tabBarRef = React . createRef < TabBar > ( ) ; private onBarSelect = ( index ) : void => { this . props . onSelect && this . props . onSelect ( index ) ; } ; private onPagerOffsetChange = ( offset ) : void => { } ; private onPagerSelect = ( index ) : void => { this . props . onSelect && this . props . onSelect ( index ) ; } ; private renderComponentChild = ( element , index ) : TabViewChildElement => { return { tab : React . cloneElement ( element , { key : index } ) , content : element . props . children , } ; } ; private renderComponentChildren = ( source ) : TabViewChildren => { const children = React . Children . toArray ( source ) as TabElement [ ] ; return children . reduce ( ( acc , element , index ) => { const { tab , content } = this . renderComponentChild ( element , index ) ; return { tabs : [ ... acc . tabs , tab ] , contents : [ ... acc . contents , content ] , } ; } , new TabViewChildren ( ) ) ; } ; public render ( ) { const { style , selectedIndex , children , tabBarStyle , indicatorStyle , ... viewProps } = this . props ; const { tabs , contents } = this . renderComponentChildren ( children ) ; return ( < View { ... viewProps } style = { [ styles . container , style ] } > < TabBar style = { tabBarStyle } ref = { this . tabBarRef } selectedIndex = { selectedIndex } indicatorStyle = { indicatorStyle } onSelect = { this . onBarSelect } > { tabs } < /TabBar> < ViewPager ref = { this . viewPagerRef } { ... viewProps } style = { [ styles . container , style ] } selectedIndex = { selectedIndex } shouldLoadComponent = { this . props . shouldLoadComponent } onOffsetChange = { this . onPagerOffsetChange } onSelect = { this . onPagerSelect } > { contents } < /ViewPager> < /View>); } } const styles = StyleSheet . create ( { container : { overflow : 'hidden' , } , } ) ;