mirror of
https://github.com/zhigang1992/react-navigation.git
synced 2026-02-09 09:13:32 +08:00
fix: fix typescript definitions (#54)
This commit is contained in:
Satyajit Sahoo
@@ -19,7 +19,7 @@
|
||||
"react-native-gesture-handler": "~1.3.0",
|
||||
"react-native-paper": "^3.0.0-alpha.4",
|
||||
"react-native-reanimated": "~1.1.0",
|
||||
"react-navigation": "^4.0.2",
|
||||
"react-navigation": "^4.0.3",
|
||||
"react-navigation-stack": "^1.5.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@@ -4318,10 +4318,10 @@ react-navigation-stack@^1.5.4:
|
||||
dependencies:
|
||||
prop-types "^15.7.2"
|
||||
|
||||
react-navigation@^4.0.2:
|
||||
version "4.0.2"
|
||||
resolved "https://registry.yarnpkg.com/react-navigation/-/react-navigation-4.0.2.tgz#09fe915cdc2436c964b8f85b642eaf8d429305c6"
|
||||
integrity sha512-c95NfoOCTb5GEHUTcngtJ9h9lxU484UftYAZ8oeNWWVW4YPbCuvUqwviUCSq3uT0JVkcEhdUqHekmL+eqYhg8g==
|
||||
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"
|
||||
|
||||
@@ -60,7 +60,7 @@
|
||||
"react-native-gesture-handler": "^1.4.1",
|
||||
"react-native-paper": "^3.0.0-alpha.4",
|
||||
"react-native-reanimated": "^1.2.0",
|
||||
"react-navigation": "^4.0.1",
|
||||
"react-navigation": "^4.0.3",
|
||||
"release-it": "^12.3.6",
|
||||
"typescript": "^3.5.2"
|
||||
},
|
||||
@@ -68,7 +68,7 @@
|
||||
"react": "*",
|
||||
"react-native": "*",
|
||||
"react-native-paper": "^2.2.2 || ^3.0.0-alpha.1",
|
||||
"react-navigation": "^4.0.2"
|
||||
"react-navigation": "^4.0.3"
|
||||
},
|
||||
"husky": {
|
||||
"hooks": {
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import * as React from 'react';
|
||||
import { StyleProp, ViewStyle } from 'react-native';
|
||||
import {
|
||||
TabRouter,
|
||||
StackActions,
|
||||
@@ -10,57 +9,18 @@ import {
|
||||
NavigationScreenProp,
|
||||
NavigationRoute,
|
||||
NavigationDescriptor,
|
||||
NavigationRouteConfigMap,
|
||||
NavigationParams,
|
||||
CreateNavigatorConfig,
|
||||
NavigationTabRouterConfig,
|
||||
} from 'react-navigation';
|
||||
import MaterialBottomTabView from '../views/MaterialBottomTabView';
|
||||
|
||||
type NavigationMaterialBottomTabOptions = {
|
||||
shifting?: boolean;
|
||||
labeled?: boolean;
|
||||
activeColor?: string;
|
||||
activeColorLight?: string;
|
||||
activeColorDark?: string;
|
||||
inactiveColor?: string;
|
||||
inactiveColorLight?: string;
|
||||
inactiveColorDark?: string;
|
||||
barStyle?: StyleProp<ViewStyle>;
|
||||
barStyleLight?: StyleProp<ViewStyle>;
|
||||
barStyleDark?: StyleProp<ViewStyle>;
|
||||
title?: string;
|
||||
tabBarLabel?: React.ReactNode;
|
||||
tabBarVisible?: boolean;
|
||||
tabBarAccessibilityLabel?: string;
|
||||
tabBarTestID?: string;
|
||||
tabBarIcon?:
|
||||
| React.ReactNode
|
||||
| ((props: {
|
||||
focused: boolean;
|
||||
tintColor?: string;
|
||||
horizontal?: boolean;
|
||||
}) => React.ReactNode);
|
||||
tabBarOnPress?: (props: {
|
||||
navigation: NavigationScreenProp<any>;
|
||||
defaultHandler: () => void;
|
||||
}) => void;
|
||||
};
|
||||
|
||||
type Screen<
|
||||
Options extends NavigationMaterialBottomTabOptions
|
||||
> = React.ComponentType<any> & {
|
||||
navigationOptions?: Options & {
|
||||
[key: string]: any;
|
||||
};
|
||||
};
|
||||
|
||||
type RouteConfig<Options> = {
|
||||
[key: string]:
|
||||
| Screen<Options>
|
||||
| ({ screen: Screen<Options> } | { getScreen(): Screen<Options> }) & {
|
||||
path?: string;
|
||||
navigationOptions?:
|
||||
| Options
|
||||
| ((options: { navigation: NavigationScreenProp<any> }) => Options);
|
||||
};
|
||||
};
|
||||
import {
|
||||
NavigationMaterialBottomTabOptions,
|
||||
NavigationTabState,
|
||||
NavigationMaterialBottomTabConfig,
|
||||
NavigationTabProp,
|
||||
} from '../types';
|
||||
|
||||
export type RenderIconProps = {
|
||||
route: NavigationRoute<any>;
|
||||
@@ -70,11 +30,12 @@ export type RenderIconProps = {
|
||||
};
|
||||
|
||||
export type NavigationViewProps = {
|
||||
navigation: NavigationProp<any>;
|
||||
navigation: NavigationProp<NavigationTabState>;
|
||||
descriptors: {
|
||||
[key: string]: NavigationDescriptor<
|
||||
any,
|
||||
NavigationMaterialBottomTabOptions
|
||||
NavigationParams,
|
||||
NavigationMaterialBottomTabOptions,
|
||||
NavigationTabProp
|
||||
>;
|
||||
};
|
||||
screenProps?: unknown;
|
||||
@@ -91,8 +52,15 @@ export type NavigationViewProps = {
|
||||
};
|
||||
|
||||
export default function createMaterialBottomTabNavigator(
|
||||
routes: RouteConfig<NavigationMaterialBottomTabOptions>,
|
||||
config: NavigationMaterialBottomTabOptions
|
||||
routes: NavigationRouteConfigMap<
|
||||
NavigationMaterialBottomTabOptions,
|
||||
NavigationTabProp
|
||||
>,
|
||||
config: CreateNavigatorConfig<
|
||||
NavigationMaterialBottomTabConfig,
|
||||
NavigationTabRouterConfig,
|
||||
NavigationMaterialBottomTabOptions
|
||||
> = {}
|
||||
) {
|
||||
class NavigationView extends React.Component<NavigationViewProps> {
|
||||
_renderScene = ({ route }: { route: { key: string } }) => {
|
||||
|
||||
87
packages/material-bottom-tabs/src/types.tsx
Normal file
87
packages/material-bottom-tabs/src/types.tsx
Normal file
@@ -0,0 +1,87 @@
|
||||
import { StyleProp, ViewStyle } from 'react-native';
|
||||
import {
|
||||
NavigationRoute,
|
||||
NavigationState,
|
||||
NavigationScreenProp,
|
||||
NavigationParams,
|
||||
} from 'react-navigation';
|
||||
|
||||
export type NavigationTabState = NavigationState;
|
||||
|
||||
export type NavigationTabProp<
|
||||
State = NavigationRoute,
|
||||
Params = NavigationParams
|
||||
> = NavigationScreenProp<State, Params> & {
|
||||
jumpTo(routeName: string, key?: string): void;
|
||||
};
|
||||
|
||||
export type NavigationMaterialBottomTabOptions = {
|
||||
shifting?: boolean;
|
||||
labeled?: boolean;
|
||||
activeColor?: string;
|
||||
activeColorLight?: string;
|
||||
activeColorDark?: string;
|
||||
inactiveColor?: string;
|
||||
inactiveColorLight?: string;
|
||||
inactiveColorDark?: string;
|
||||
barStyle?: StyleProp<ViewStyle>;
|
||||
barStyleLight?: StyleProp<ViewStyle>;
|
||||
barStyleDark?: StyleProp<ViewStyle>;
|
||||
title?: string;
|
||||
tabBarLabel?: React.ReactNode;
|
||||
tabBarVisible?: boolean;
|
||||
tabBarAccessibilityLabel?: string;
|
||||
tabBarTestID?: string;
|
||||
tabBarIcon?:
|
||||
| React.ReactNode
|
||||
| ((props: {
|
||||
focused: boolean;
|
||||
tintColor?: string;
|
||||
horizontal?: boolean;
|
||||
}) => React.ReactNode);
|
||||
tabBarOnPress?: (props: {
|
||||
navigation: NavigationTabProp;
|
||||
defaultHandler: () => void;
|
||||
}) => void;
|
||||
};
|
||||
|
||||
export type NavigationMaterialBottomTabConfig = {
|
||||
/**
|
||||
* Whether the shifting style is used, the active tab appears wider and the inactive tabs won't have a label.
|
||||
* By default, this is `true` when you have more than 3 tabs.
|
||||
*/
|
||||
shifting?: boolean;
|
||||
/**
|
||||
* Whether to show labels in tabs. When `false`, only icons will be displayed.
|
||||
*/
|
||||
labeled?: boolean;
|
||||
/**
|
||||
* Custom color for icon and label in the active tab.
|
||||
*/
|
||||
activeColor?: string;
|
||||
activeColorLight?: string;
|
||||
activeColorDark?: string;
|
||||
/**
|
||||
* Custom color for icon and label in the inactive tab.
|
||||
*/
|
||||
inactiveColor?: string;
|
||||
inactiveColorLight?: string;
|
||||
inactiveColorDark?: string;
|
||||
/**
|
||||
* Whether the bottom navigation bar is hidden when keyboard is shown.
|
||||
* On Android, this works best when [`windowSoftInputMode`](https://developer.android.com/guide/topics/manifest/activity-element#wsoft) is set to `adjustResize`.
|
||||
*/
|
||||
keyboardHidesNavigationBar?: boolean;
|
||||
/**
|
||||
* Style for the bottom navigation bar.
|
||||
* You can set a bottom padding here if you have a translucent navigation bar on Android:
|
||||
*
|
||||
* ```js
|
||||
* barStyle={{ paddingBottom: 48 }}
|
||||
* ```
|
||||
*/
|
||||
barStyle?: StyleProp<ViewStyle>;
|
||||
barStyleLight?: StyleProp<ViewStyle>;
|
||||
barStyleDark?: StyleProp<ViewStyle>;
|
||||
style?: StyleProp<ViewStyle>;
|
||||
};
|
||||
@@ -1,5 +1,4 @@
|
||||
import * as React from 'react';
|
||||
import { StyleProp, ViewStyle } from 'react-native';
|
||||
import {
|
||||
ThemeContext,
|
||||
NavigationRoute,
|
||||
@@ -7,6 +6,7 @@ import {
|
||||
NavigationDescriptor,
|
||||
} from 'react-navigation';
|
||||
import { BottomNavigation } from 'react-native-paper';
|
||||
import { NavigationMaterialBottomTabConfig } from '../types';
|
||||
|
||||
type Options = {
|
||||
tabBarVisible?: boolean;
|
||||
@@ -15,25 +15,17 @@ type Options = {
|
||||
tabBarColorDark?: string;
|
||||
};
|
||||
|
||||
type Props = React.ComponentProps<typeof BottomNavigation> & {
|
||||
navigation: NavigationProp<any>;
|
||||
descriptors: { [key: string]: NavigationDescriptor<any, Options> };
|
||||
screenProps?: unknown;
|
||||
renderIcon: (options: {
|
||||
route: NavigationRoute;
|
||||
focused: boolean;
|
||||
tintColor: string;
|
||||
}) => React.ReactNode;
|
||||
activeColor?: string;
|
||||
activeColorLight?: string;
|
||||
activeColorDark?: string;
|
||||
inactiveColor?: string;
|
||||
inactiveColorLight?: string;
|
||||
inactiveColorDark?: string;
|
||||
barStyle?: StyleProp<ViewStyle>;
|
||||
barStyleLight?: StyleProp<ViewStyle>;
|
||||
barStyleDark?: StyleProp<ViewStyle>;
|
||||
};
|
||||
type Props = React.ComponentProps<typeof BottomNavigation> &
|
||||
NavigationMaterialBottomTabConfig & {
|
||||
navigation: NavigationProp<any>;
|
||||
descriptors: { [key: string]: NavigationDescriptor<any, Options> };
|
||||
screenProps?: unknown;
|
||||
renderIcon: (options: {
|
||||
route: NavigationRoute;
|
||||
focused: boolean;
|
||||
tintColor: string;
|
||||
}) => React.ReactNode;
|
||||
};
|
||||
|
||||
export default class MaterialBottomTabView extends React.Component<Props> {
|
||||
static contextType = ThemeContext;
|
||||
|
||||
@@ -7378,10 +7378,10 @@ react-native@~0.59.8:
|
||||
xmldoc "^0.4.0"
|
||||
yargs "^9.0.0"
|
||||
|
||||
react-navigation@^4.0.1:
|
||||
version "4.0.2"
|
||||
resolved "https://registry.yarnpkg.com/react-navigation/-/react-navigation-4.0.2.tgz#09fe915cdc2436c964b8f85b642eaf8d429305c6"
|
||||
integrity sha512-c95NfoOCTb5GEHUTcngtJ9h9lxU484UftYAZ8oeNWWVW4YPbCuvUqwviUCSq3uT0JVkcEhdUqHekmL+eqYhg8g==
|
||||
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"
|
||||
|
||||
Reference in New Issue
Block a user