1 | function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
2 |
|
3 | import * as React from 'react';
|
4 | import { StyleSheet, View } from 'react-native';
|
5 | import TabBar from './TabBar';
|
6 | import SceneView from './SceneView';
|
7 | import Pager from './Pager';
|
8 | export default function TabView({
|
9 | onIndexChange,
|
10 | navigationState,
|
11 | renderScene,
|
12 | initialLayout,
|
13 | keyboardDismissMode = 'auto',
|
14 | lazy = false,
|
15 | lazyPreloadDistance = 0,
|
16 | onSwipeStart,
|
17 | onSwipeEnd,
|
18 | renderLazyPlaceholder = () => null,
|
19 | renderTabBar = props => /*#__PURE__*/React.createElement(TabBar, props),
|
20 | sceneContainerStyle,
|
21 | style,
|
22 | swipeEnabled = true,
|
23 | tabBarPosition = 'top'
|
24 | }) {
|
25 | const [layout, setLayout] = React.useState({
|
26 | width: 0,
|
27 | height: 0,
|
28 | ...initialLayout
|
29 | });
|
30 |
|
31 | const jumpToIndex = index => {
|
32 | if (index !== navigationState.index) {
|
33 | onIndexChange(index);
|
34 | }
|
35 | };
|
36 |
|
37 | const handleLayout = e => {
|
38 | const {
|
39 | height,
|
40 | width
|
41 | } = e.nativeEvent.layout;
|
42 | setLayout(prevLayout => {
|
43 | if (prevLayout.width === width && prevLayout.height === height) {
|
44 | return prevLayout;
|
45 | }
|
46 |
|
47 | return {
|
48 | height,
|
49 | width
|
50 | };
|
51 | });
|
52 | };
|
53 |
|
54 | return React.createElement(View, {
|
55 | onLayout: handleLayout,
|
56 | style: [styles.pager, style]
|
57 | }, React.createElement(Pager, {
|
58 | layout: layout,
|
59 | navigationState: navigationState,
|
60 | keyboardDismissMode: keyboardDismissMode,
|
61 | swipeEnabled: swipeEnabled,
|
62 | onSwipeStart: onSwipeStart,
|
63 | onSwipeEnd: onSwipeEnd,
|
64 | onIndexChange: jumpToIndex
|
65 | }, ({
|
66 | position,
|
67 | render,
|
68 | addEnterListener,
|
69 | jumpTo
|
70 | }) => {
|
71 |
|
72 |
|
73 | const sceneRendererProps = {
|
74 | position,
|
75 | layout,
|
76 | jumpTo
|
77 | };
|
78 | return React.createElement(React.Fragment, null, tabBarPosition === 'top' && renderTabBar({ ...sceneRendererProps,
|
79 | navigationState
|
80 | }), render(navigationState.routes.map((route, i) => {
|
81 | return React.createElement(SceneView, _extends({}, sceneRendererProps, {
|
82 | addEnterListener: addEnterListener,
|
83 | key: route.key,
|
84 | index: i,
|
85 | lazy: typeof lazy === 'function' ? lazy({
|
86 | route
|
87 | }) : lazy,
|
88 | lazyPreloadDistance: lazyPreloadDistance,
|
89 | navigationState: navigationState,
|
90 | style: sceneContainerStyle
|
91 | }), ({
|
92 | loading
|
93 | }) => loading ? renderLazyPlaceholder({
|
94 | route
|
95 | }) : renderScene({ ...sceneRendererProps,
|
96 | route
|
97 | }));
|
98 | })), tabBarPosition === 'bottom' && renderTabBar({ ...sceneRendererProps,
|
99 | navigationState
|
100 | }));
|
101 | }));
|
102 | }
|
103 | const styles = StyleSheet.create({
|
104 | pager: {
|
105 | flex: 1,
|
106 | overflow: 'hidden'
|
107 | }
|
108 | });
|
109 |
|
\ | No newline at end of file |