mirror of
https://github.com/zhigang1992/react-navigation.git
synced 2026-05-10 05:09:35 +08:00
BREAKING: Update React Native TabView (#1218)
This commit is contained in:
committed by
Mike Grabowski
parent
655b46b60b
commit
0cd3eaa97a
@@ -85,7 +85,7 @@ The route configs object is a mapping from route name to a route config, which t
|
||||
- `tabBarPosition` - position of the tab bar, can be `'top'` or `'bottom'`
|
||||
- `swipeEnabled` - whether to allow swiping between tabs
|
||||
- `animationEnabled` - whether to animate when changing tabs
|
||||
- `lazyLoad` - whether to lazily render tabs as needed as opposed to rendering them upfront
|
||||
- `lazy` - whether to lazily render tabs as needed as opposed to rendering them upfront
|
||||
- `tabBarOptions` - configure the tab bar, see below.
|
||||
|
||||
Several options get passed to the underlying router to modify navigation logic:
|
||||
|
||||
@@ -77,7 +77,7 @@
|
||||
"path-to-regexp": "^1.7.0",
|
||||
"prop-types": "^15.5.8",
|
||||
"react-native-drawer-layout-polyfill": "1.2.0",
|
||||
"react-native-tab-view": "^0.0.59"
|
||||
"react-native-tab-view": "^0.0.61"
|
||||
},
|
||||
"jest": {
|
||||
"notify": true,
|
||||
|
||||
@@ -1,13 +1,8 @@
|
||||
/* @flow */
|
||||
|
||||
import React, { PureComponent } from 'react';
|
||||
import { Platform, StyleSheet } from 'react-native';
|
||||
import {
|
||||
TabViewAnimated,
|
||||
TabViewPagerAndroid,
|
||||
TabViewPagerScroll,
|
||||
TabViewPagerPan,
|
||||
} from 'react-native-tab-view';
|
||||
import { StyleSheet } from 'react-native';
|
||||
import { TabViewAnimated } from 'react-native-tab-view';
|
||||
import SceneView from '../SceneView';
|
||||
import withCachedChildNavigation from '../../withCachedChildNavigation';
|
||||
|
||||
@@ -26,7 +21,7 @@ export type TabViewConfig = {
|
||||
tabBarOptions?: {},
|
||||
swipeEnabled?: boolean,
|
||||
animationEnabled?: boolean,
|
||||
lazyLoad?: boolean,
|
||||
lazy?: boolean,
|
||||
};
|
||||
|
||||
export type TabScene = {
|
||||
@@ -42,7 +37,7 @@ type Props = {
|
||||
tabBarOptions?: {},
|
||||
swipeEnabled?: boolean,
|
||||
animationEnabled?: boolean,
|
||||
lazyLoad?: boolean,
|
||||
lazy?: boolean,
|
||||
|
||||
screenProps?: {},
|
||||
navigation: NavigationScreenProp<NavigationState, NavigationAction>,
|
||||
@@ -52,19 +47,6 @@ type Props = {
|
||||
},
|
||||
};
|
||||
|
||||
let TabViewPager;
|
||||
|
||||
switch (Platform.OS) {
|
||||
case 'android':
|
||||
TabViewPager = TabViewPagerAndroid;
|
||||
break;
|
||||
case 'ios':
|
||||
TabViewPager = TabViewPagerScroll;
|
||||
break;
|
||||
default:
|
||||
TabViewPager = TabViewPagerPan;
|
||||
}
|
||||
|
||||
class TabView extends PureComponent<void, Props, void> {
|
||||
props: Props;
|
||||
|
||||
@@ -145,30 +127,14 @@ class TabView extends PureComponent<void, Props, void> {
|
||||
);
|
||||
};
|
||||
|
||||
_renderPager = (props: *) => {
|
||||
const {
|
||||
swipeEnabled,
|
||||
animationEnabled,
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<TabViewPager
|
||||
{...props}
|
||||
swipeEnabled={swipeEnabled}
|
||||
animationEnabled={animationEnabled}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
_configureTransition = () => null;
|
||||
|
||||
render() {
|
||||
const {
|
||||
router,
|
||||
tabBarComponent,
|
||||
tabBarPosition,
|
||||
animationEnabled,
|
||||
lazyLoad,
|
||||
swipeEnabled,
|
||||
lazy,
|
||||
screenProps,
|
||||
} = this.props;
|
||||
|
||||
@@ -193,26 +159,19 @@ class TabView extends PureComponent<void, Props, void> {
|
||||
}
|
||||
}
|
||||
|
||||
let configureTransition;
|
||||
|
||||
if (animationEnabled === false) {
|
||||
configureTransition = this._configureTransition;
|
||||
}
|
||||
|
||||
const props = {
|
||||
style: styles.container,
|
||||
navigationState: this.props.navigation.state,
|
||||
lazy: lazyLoad,
|
||||
lazy,
|
||||
renderHeader,
|
||||
renderFooter,
|
||||
animationEnabled,
|
||||
swipeEnabled,
|
||||
renderScene: this._renderScene,
|
||||
renderPager: this._renderPager,
|
||||
configureTransition,
|
||||
onRequestChangeTab: this._handlePageChanged,
|
||||
screenProps: this.props.screenProps,
|
||||
};
|
||||
|
||||
/* $FlowFixMe */
|
||||
return <TabViewAnimated {...props} />;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3921,11 +3921,11 @@ react-native-drawer-layout@1.2.0:
|
||||
dependencies:
|
||||
react-native-dismiss-keyboard "1.0.0"
|
||||
|
||||
react-native-tab-view@^0.0.59:
|
||||
version "0.0.59"
|
||||
resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-0.0.59.tgz#2cd1d809a5699fcc5d45fa6fc08deb21d3f81fea"
|
||||
react-native-tab-view@^0.0.61:
|
||||
version "0.0.61"
|
||||
resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-0.0.61.tgz#9f5446c9ad33158b87f0bccf5004fbff79ca1f92"
|
||||
dependencies:
|
||||
eslint-plugin-prettier "^2.0.1"
|
||||
prop-types "^15.5.8"
|
||||
|
||||
react-native-vector-icons@^3.0.0:
|
||||
version "3.0.0"
|
||||
|
||||
Reference in New Issue
Block a user