kylefang/react-navigation
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-navigation.git synced 2026-02-09 09:13:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: fix typescript definitions (#95)

Browse Source
This commit is contained in:
Satyajit Sahoo
2019-09-11 17:01:30 +02:00
parent cadbff2760
commit da51cedff4
11 changed files with 178 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/drawer/example/package.json
View File

@@ -20,7 +20,7 @@
"react-native-paper": "^2.2.0",
"react-native-reanimated": "~1.1.0",
"react-native-webview": "~5.12.0",
"react-navigation": "^4.0.1",
"react-navigation": "^4.0.3",
"react-navigation-stack": "^1.4.0"
},
"devDependencies": {

8
packages/drawer/example/yarn.lock
View File

@@ -4440,10 +4440,10 @@ react-navigation-stack@^1.4.0:
dependencies:
prop-types "^15.7.2"
react-navigation@^4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/react-navigation/-/react-navigation-4.0.1.tgz#96c17ac90afcf0a5bc957358152326211a79d183"
integrity sha512-6XzuqvhOnY6FA6tCErD6+vfZdnP+O/7hCQper9qDulxxW2ZVkCF4xWdzoVcv3DDR6P5CK6l1tcbJ1ku256AdFQ==
react-navigation@^4.0.3:
version "4.0.3"
resolved "https://registry.yarnpkg.com/react-navigation/-/react-navigation-4.0.3.tgz#ba2cacb71db56e22ee50d774829ebc7fa95a0724"
integrity sha512-oASR5gHwd6se1Mw8AM4Ie8GicD5mKzRiYP6oaQujiQroQzQPij9sXxkRSqOscd/Kw1/Hf3htvBX3ZRPbOkWsfA==
dependencies:
"@react-navigation/core" "^3.5.0"
"@react-navigation/native" "^3.6.2"

6
packages/drawer/package.json
View File

@@ -15,7 +15,7 @@
"lint": "eslint --ext .js,.ts,.tsx .",
"typescript": "tsc --noEmit",
"example": "yarn --cwd example",
"bootstrap": "yarn && yarn example",
"bootstrap": "yarn example && yarn",
"prepare": "bob build",
"release": "release-it"
},
@@ -68,7 +68,7 @@
"react-native-reanimated": "^1.2.0",
"react-native-screens": "^1.0.0-alpha.23",
"react-native-testing-library": "^1.7.0",
"react-navigation": "^4.0.1",
"react-navigation": "^4.0.3",
"react-test-renderer": "16.8.6",
"release-it": "^12.3.6",
"typescript": "^3.4.5"
@@ -80,7 +80,7 @@
"react-native-gesture-handler": "^1.0.12",
"react-native-reanimated": "^1.0.0",
"react-native-screens": "^1.0.0 || ^1.0.0-alpha",
"react-navigation": "^4.0.1"
"react-navigation": "^4.0.3"
},
"jest": {
"preset": "react-native",

11
packages/drawer/src/index.tsx
View File

@@ -21,3 +21,14 @@ export { default as DrawerSidebar } from './views/DrawerSidebar';
export { default as DrawerView } from './views/DrawerView';
export { default as DrawerGestureContext } from './utils/DrawerGestureContext';
/**
* Types
*/
export {
NavigationDrawerState,
NavigationDrawerProp,
NavigationDrawerOptions,
NavigationDrawerConfig,
NavigationDrawerRouterConfig,
} from './types';

37
packages/drawer/src/navigators/createDrawerNavigator.tsx
View File

@@ -1,15 +1,24 @@
import * as React from 'react';
import { Dimensions, Platform, ScrollView, I18nManager } from 'react-native';
import { createNavigator, ThemeColors, SafeAreaView } from 'react-navigation';
import {
createNavigator,
ThemeColors,
SafeAreaView,
NavigationRouteConfigMap,
CreateNavigatorConfig,
} from 'react-navigation';
import DrawerRouter from '../routers/DrawerRouter';
import DrawerView from '../views/DrawerView';
import DrawerItems, { Props } from '../views/DrawerNavigatorItems';
import DrawerItems from '../views/DrawerNavigatorItems';
import {
NavigationDrawerOptions,
NavigationDrawerProp,
NavigationDrawerConfig,
NavigationDrawerRouterConfig,
ContentComponentProps,
} from '../types';
// A stack navigators props are the intersection between
// the base navigator props (navgiation, screenProps, etc)
// and the view's props
const defaultContentComponent = (props: Props) => (
const defaultContentComponent = (props: ContentComponentProps) => (
<ScrollView alwaysBounceVertical={false}>
<SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
<DrawerItems {...props} />
@@ -17,7 +26,7 @@ const defaultContentComponent = (props: Props) => (
</ScrollView>
);
const DefaultDrawerConfig = {
const DefaultDrawerConfig: NavigationDrawerConfig = {
drawerWidth: () => {
/*
* Default drawer width is screen width - header height
@@ -49,7 +58,17 @@ const DefaultDrawerConfig = {
statusBarAnimation: 'slide',
};
const DrawerNavigator = (routeConfigs: object, config: any = {}) => {
const DrawerNavigator = (
routeConfigs: NavigationRouteConfigMap<
NavigationDrawerOptions,
NavigationDrawerProp
>,
config: CreateNavigatorConfig<
NavigationDrawerConfig,
NavigationDrawerRouterConfig,
NavigationDrawerProp
> = {}
) => {
const mergedConfig = { ...DefaultDrawerConfig, ...config };
const drawerRouter = DrawerRouter(routeConfigs, mergedConfig);

3
packages/drawer/src/routers/DrawerRouter.tsx
View File

@@ -3,6 +3,7 @@ import {
NavigationActions,
NavigationAction,
NavigationRoute,
NavigationRouteConfigMap,
} from 'react-navigation';
import * as DrawerActions from './DrawerActions';
@@ -34,7 +35,7 @@ const getActiveRouteKey = (route: NavigationRoute): string => {
};
export default (
routeConfigs: object,
routeConfigs: NavigationRouteConfigMap<any, any>,
config: {
unmountInactiveRoutes?: boolean;
resetOnBlur?: boolean;

109
packages/drawer/src/types.tsx
View File

@@ -1,25 +1,104 @@
import { NavigationAction } from 'react-navigation';
export type Route = {
key: string;
routeName: string;
};
import {
NavigationScreenProp,
NavigationState,
NavigationRoute,
NavigationParams,
NavigationProp,
NavigationDescriptor,
} from 'react-navigation';
import { StyleProp, ViewStyle, TextStyle } from 'react-native';
import Animated from 'react-native-reanimated';
export type Scene = {
route: Route;
route: NavigationRoute;
index: number;
focused: boolean;
tintColor?: string;
};
export type Navigation = {
state: {
key: string;
index: number;
routes: Route[];
isDrawerOpen: boolean;
};
export type NavigationDrawerState = NavigationState & {
isDrawerOpen: boolean;
};
export type NavigationDrawerProp<
State = NavigationRoute,
Params = NavigationParams
> = NavigationScreenProp<State, Params> & {
openDrawer: () => void;
closeDrawer: () => void;
dispatch: (action: NavigationAction) => boolean;
toggleDrawer: () => void;
jumpTo: (routeName: string, key?: string) => void;
};
export type NavigationDrawerOptions = {
title?: string;
drawerLabel?:
| React.ReactNode
| ((props: { tintColor?: string; focused: boolean }) => React.ReactNode);
drawerIcon?:
| React.ReactNode
| ((props: { tintColor?: string; focused: boolean }) => React.ReactNode);
drawerLockMode?: 'locked-closed' | 'locked-open';
};
export type NavigationDrawerConfig = {
drawerWidth?: number | (() => number);
contentComponent?: React.ComponentType<ContentComponentProps>;
drawerPosition?: 'left' | 'right';
drawerType?: 'front' | 'back' | 'slide';
keyboardDismissMode?: 'none' | 'on-drag';
swipeEdgeWidth?: number;
swipeDistanceThreshold?: number;
swipeVelocityThreshold?: number;
hideStatusBar?: boolean;
statusBarAnimation?: 'slide' | 'none' | 'fade';
drawerBackgroundColor?: ThemedColor;
overlayColor?: ThemedColor;
};
export type NavigationDrawerRouterConfig = {
unmountInactiveRoutes?: boolean;
resetOnBlur?: boolean;
initialRouteName?: string;
contentComponent?: React.ComponentType<ContentComponentProps>;
contentOptions?: object;
};
export type ThemedColor = {
light: string;
dark: string;
};
export type DrawerNavigatorItemsProps = {
items: NavigationRoute[];
activeItemKey?: string | null;
activeTintColor?: string | ThemedColor;
activeBackgroundColor?: string | ThemedColor;
inactiveTintColor?: string | ThemedColor;
inactiveBackgroundColor?: string | ThemedColor;
getLabel: (scene: Scene) => React.ReactNode;
renderIcon: (scene: Scene) => React.ReactNode;
onItemPress: (scene: { route: NavigationRoute; focused: boolean }) => void;
itemsContainerStyle?: StyleProp<ViewStyle>;
itemStyle?: StyleProp<ViewStyle>;
labelStyle?: StyleProp<TextStyle>;
activeLabelStyle?: StyleProp<TextStyle>;
inactiveLabelStyle?: StyleProp<TextStyle>;
iconContainerStyle?: StyleProp<ViewStyle>;
drawerPosition: 'left' | 'right';
};
export type ContentComponentProps = DrawerNavigatorItemsProps & {
navigation: NavigationProp<NavigationDrawerState>;
descriptors: { [key: string]: any };
drawerOpenProgress: Animated.Node<number>;
screenProps: unknown;
};
export type SceneDescriptorMap = {
[key: string]: NavigationDescriptor<
NavigationParams,
NavigationDrawerOptions,
NavigationDrawerProp
>;
};

32
packages/drawer/src/views/DrawerNavigatorItems.tsx
View File

@@ -1,37 +1,15 @@
import * as React from 'react';
import { View, Text, StyleSheet, ViewStyle, TextStyle } from 'react-native';
import { View, Text, StyleSheet } from 'react-native';
import { SafeAreaView, ThemeContext } from 'react-navigation';
import TouchableItem from './TouchableItem';
import { Scene, Route } from '../types';
export type ThemedColor = {
light: string;
dark: string;
};
export type Props = {
items: Route[];
activeItemKey?: string | null;
activeTintColor?: string | ThemedColor;
activeBackgroundColor?: string | ThemedColor;
inactiveTintColor?: string | ThemedColor;
inactiveBackgroundColor?: string | ThemedColor;
getLabel: (scene: Scene) => React.ReactNode;
renderIcon: (scene: Scene) => React.ReactNode;
onItemPress: (scene: { route: Route; focused: boolean }) => void;
itemsContainerStyle?: ViewStyle;
itemStyle?: ViewStyle;
labelStyle?: TextStyle;
activeLabelStyle?: TextStyle;
inactiveLabelStyle?: TextStyle;
iconContainerStyle?: ViewStyle;
drawerPosition: 'left' | 'right';
};
import { DrawerNavigatorItemsProps } from '../types';
/**
* Component that renders the navigation list in the drawer.
*/
export default class DrawerNavigatorItems extends React.Component<Props, any> {
export default class DrawerNavigatorItems extends React.Component<
DrawerNavigatorItemsProps
> {
/* Material design specs - https://material.io/guidelines/patterns/navigation-drawer.html#navigation-drawer-specs */
static defaultProps = {
activeTintColor: {

34
packages/drawer/src/views/DrawerSidebar.tsx
View File

@@ -1,24 +1,25 @@
import * as React from 'react';
import { StyleSheet, View, Animated, ViewStyle } from 'react-native';
import { NavigationActions } from 'react-navigation';
import { Props as DrawerNavigatorItemsProps } from './DrawerNavigatorItems';
import { Navigation, Scene, Route } from '../types';
export type ContentComponentProps = DrawerNavigatorItemsProps & {
navigation: Navigation;
descriptors: { [key: string]: any };
drawerOpenProgress: Animated.AnimatedInterpolation;
screenProps: unknown;
};
import { StyleSheet, View, ViewStyle } from 'react-native';
import {
NavigationActions,
NavigationRoute,
NavigationProp,
} from 'react-navigation';
import Animated from 'react-native-reanimated';
import {
Scene,
NavigationDrawerState,
ContentComponentProps,
SceneDescriptorMap,
} from '../types';
type Props = {
contentComponent?: React.ComponentType<ContentComponentProps>;
contentOptions?: object;
screenProps?: unknown;
navigation: Navigation;
descriptors: { [key: string]: any };
drawerOpenProgress: Animated.AnimatedInterpolation;
navigation: NavigationProp<NavigationDrawerState>;
descriptors: SceneDescriptorMap;
drawerOpenProgress: Animated.Node<number>;
drawerPosition: 'left' | 'right';
style?: ViewStyle;
};
@@ -68,10 +69,11 @@ class DrawerSidebar extends React.PureComponent<Props> {
route,
focused,
}: {
route: Route;
route: NavigationRoute;
focused: boolean;
}) => {
if (focused) {
// @ts-ignore
this.props.navigation.closeDrawer();
} else {
this.props.navigation.dispatch(

18
packages/drawer/src/views/DrawerView.tsx
View File

@@ -9,11 +9,15 @@ import {
import { ScreenContainer } from 'react-native-screens';
import * as DrawerActions from '../routers/DrawerActions';
import DrawerSidebar, { ContentComponentProps } from './DrawerSidebar';
import DrawerSidebar from './DrawerSidebar';
import DrawerGestureContext from '../utils/DrawerGestureContext';
import ResourceSavingScene from './ResourceSavingScene';
import Drawer from './Drawer';
import { Navigation } from '../types';
import {
NavigationDrawerState,
ContentComponentProps,
SceneDescriptorMap,
} from '../types';
import { PanGestureHandler } from 'react-native-gesture-handler';
type DrawerOptions = {
@@ -37,14 +41,8 @@ type DrawerOptions = {
type Props = {
lazy: boolean;
navigation: Navigation;
descriptors: {
[key: string]: {
navigation: NavigationProp<any>;
getComponent: () => React.ComponentType<{}>;
options: DrawerOptions;
};
};
navigation: NavigationProp<NavigationDrawerState>;
descriptors: SceneDescriptorMap;
navigationConfig: DrawerOptions & {
contentComponent?: React.ComponentType<ContentComponentProps>;
unmountInactiveRoutes?: boolean;

8
packages/drawer/yarn.lock
View File

@@ -7349,10 +7349,10 @@ react-native@~0.59.10:
xmldoc "^0.4.0"
yargs "^9.0.0"
react-navigation@^4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/react-navigation/-/react-navigation-4.0.1.tgz#96c17ac90afcf0a5bc957358152326211a79d183"
integrity sha512-6XzuqvhOnY6FA6tCErD6+vfZdnP+O/7hCQper9qDulxxW2ZVkCF4xWdzoVcv3DDR6P5CK6l1tcbJ1ku256AdFQ==
react-navigation@^4.0.3:
version "4.0.3"
resolved "https://registry.yarnpkg.com/react-navigation/-/react-navigation-4.0.3.tgz#ba2cacb71db56e22ee50d774829ebc7fa95a0724"
integrity sha512-oASR5gHwd6se1Mw8AM4Ie8GicD5mKzRiYP6oaQujiQroQzQPij9sXxkRSqOscd/Kw1/Hf3htvBX3ZRPbOkWsfA==
dependencies:
"@react-navigation/core" "^3.5.0"
"@react-navigation/native" "^3.6.2"