Tabs component

This component depends on react-native-pager-view, so you also need to install :

yarn add react-native-pager-view

Effect demonstration

1. Default effect

const routes = [
  { title: 'First', component: <LongList orderDate={orderDate} /> },
  { title: 'Second', component: <LongList orderDate={orderDate} /> },
  { title : ' Third ' , component : < LongList orderDate = { orderDate } /> },
];

return (
  <Container>
    <Tabs scenes={routes}/>
  </Container>
);

2. Enter a range of keys

const routes = [
  { title : ' First ' , component : < LongList orderDate = { orderDate } /> },
  { title : ' Second ' , component : < LongList orderDate = { orderDate } /> },
  { title : ' Third ' , component : < LongList orderDate = { orderDate } /> },
];

return (
  <Container>
    <Tabs scenes={routes} tabStyle={{backgroundColor:'red'}}/>
  </Container>
);

3. Ensure that there is a slightly less expensive solution

const routes = [
  { title: 'First', component: <LongList orderDate={orderDate} /> },
  { title: 'Second', component: <LongList orderDate={orderDate} /> },
  { title: 'Third', component: <LongList orderDate={orderDate} /> },
];

return (
  <Container>
    <Tabs scenes={routes} labelStyle={{color: 'red'}} />
  </Container>
);

4. Custom indicator style

const routes = [
  { title: 'First', component: <LongList orderDate={orderDate} /> },
  { title: 'Second', component: <LongList orderDate={orderDate} /> },
  { title: 'Third', component: <LongList orderDate={orderDate} /> },
];

return (
  <Container>
    <Tabs scenes={routes} indicatorStyle={{color: 'red', height: 10, borderRadius: 5}} />
  </Container>
);

5. Select the keyboard

const routes = [
  { title : ' First ' , component : < LongList orderDate = { orderDate } /> },
  { title : ' Second ' , component : < LongList orderDate = { orderDate } /> },
  { title : ' Third ' , component : < LongList orderDate = { orderDate } /> },
];

return (
  <Container>
    <Tabs scenes={routes} showIndicator={false} />
  </Container>
);

6. Many tabs

const routes = [
  { title: 'First', component: <LongList orderDate={orderDate} /> },
  { title: 'Second', component: <LongList orderDate={orderDate} /> },
  { title: 'Third', component: <LongList orderDate={orderDate} /> },
  { title: 'Forth', component: <LongList orderDate={orderDate} /> },
  { title: 'Fifth', component: <LongList orderDate={orderDate} /> },
  { title: 'Sixth', component: <LongList orderDate={orderDate} /> },
  { title: 'Seventh', component: <LongList orderDate={orderDate} /> },
];

return (
  <Container>
    <Tabs scenes={routes} />
  </Container>
);

7. Switch to second tab by default

const routes = [
{ title: 'First', component: <LongList orderDate={orderDate} /> },
  { title: 'Second', component: <LongList orderDate={orderDate} /> },
  { title: 'Third', component: <LongList orderDate={orderDate} /> },
];

return (
  <Container>
    <Tabs scenes={routes} initialPage={1} />
  </Container>
);

API

Properties	Required	Description	Type	Default Value
scenes	true	tab panel configuration	TabScene[]
initialPage	false	Which tab to switch to by default	number	0
height	false	tab height	boolean	48
scrollEnabled	false	Enable gesture control for left and right sliding	boolean	true
overdrag	false	Whether to allow continued dragging after reaching the first or last page	boolean	true
keyboardDismissMode	false	Turn off keyboard mode	none | on-drag	on-drag
showIndicator	false	Whether to display the indicator	boolean	true
tabStyle	false	tab style	ViewStyle
tabItemStyle	false	Tab label style	ViewStyle
labelStyle	false	Label text style	TextStyle
indicatorStyle	false	indicator style	ViewStyle

Typescript

interface TabScene {
  title: ReactNode;
  component: JSX.Element;
}