mirror of
https://github.com/zhigang1992/react-navigation.git
synced 2026-01-14 22:41:55 +08:00
Compare commits
4 Commits
@react-nav
...
@react-nav
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
75ad2aaae5 | ||
|
|
eef17a801e | ||
|
|
7b8277dae5 | ||
|
|
6cddb5238c |
@@ -35,7 +35,7 @@ Navigators bundle a router and a view which takes the navigation state and decid
|
||||
A simple navigator could look like this:
|
||||
|
||||
```js
|
||||
import { createNavigatorFactory } from '@react-navigation/core';
|
||||
import { createNavigatorFactory } from '@react-navigation/native';
|
||||
|
||||
function StackNavigator({ initialRouteName, children, ...rest }) {
|
||||
// The `navigation` object contains the navigation state and some helpers (e.g. push, pop)
|
||||
@@ -256,7 +256,7 @@ Sometimes we want to run side-effects when a screen is focused. A side effect ma
|
||||
To make this easier, the library exports a `useFocusEffect` hook:
|
||||
|
||||
```js
|
||||
import { useFocusEffect } from '@react-navigation/core';
|
||||
import { useFocusEffect } from '@react-navigation/native';
|
||||
|
||||
function Profile({ userId }) {
|
||||
const [user, setUser] = React.useState(null);
|
||||
@@ -285,7 +285,7 @@ The `useFocusEffect` is analogous to React's `useEffect` hook. The only differen
|
||||
We might want to render different content based on the current focus state of the screen. The library exports a `useIsFocused` hook to make this easier:
|
||||
|
||||
```js
|
||||
import { useIsFocused } from '@react-navigation/core';
|
||||
import { useIsFocused } from '@react-navigation/native';
|
||||
|
||||
// ...
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import * as React from 'react';
|
||||
import { View, TextInput, ActivityIndicator, StyleSheet } from 'react-native';
|
||||
import { Title, Button } from 'react-native-paper';
|
||||
import { ParamListBase } from '@react-navigation/core';
|
||||
import { ParamListBase } from '@react-navigation/native';
|
||||
import {
|
||||
createStackNavigator,
|
||||
HeaderBackButton,
|
||||
|
||||
@@ -2,7 +2,7 @@ import * as React from 'react';
|
||||
import { View, StyleSheet } from 'react-native';
|
||||
import { Button } from 'react-native-paper';
|
||||
import { useSafeArea } from 'react-native-safe-area-context';
|
||||
import { RouteProp, ParamListBase } from '@react-navigation/core';
|
||||
import { RouteProp, ParamListBase } from '@react-navigation/native';
|
||||
import {
|
||||
createStackNavigator,
|
||||
StackNavigationProp,
|
||||
|
||||
@@ -7,7 +7,7 @@ import {
|
||||
RouteProp,
|
||||
ParamListBase,
|
||||
useFocusEffect,
|
||||
} from '@react-navigation/core';
|
||||
} from '@react-navigation/native';
|
||||
import { DrawerNavigationProp } from '@react-navigation/drawer';
|
||||
import { StackNavigationProp } from '@react-navigation/stack';
|
||||
import {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import * as React from 'react';
|
||||
import { View, StyleSheet } from 'react-native';
|
||||
import { Button } from 'react-native-paper';
|
||||
import { RouteProp, ParamListBase } from '@react-navigation/core';
|
||||
import { RouteProp, ParamListBase } from '@react-navigation/native';
|
||||
import {
|
||||
createStackNavigator,
|
||||
StackNavigationProp,
|
||||
|
||||
@@ -6,10 +6,8 @@ import { Asset } from 'expo-asset';
|
||||
import {
|
||||
InitialState,
|
||||
getStateFromPath,
|
||||
NavigationContainerRef,
|
||||
} from '@react-navigation/core';
|
||||
import {
|
||||
useLinking,
|
||||
NavigationContainerRef,
|
||||
NavigationNativeContainer,
|
||||
} from '@react-navigation/native';
|
||||
import {
|
||||
|
||||
@@ -3,6 +3,14 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
# [5.0.0-alpha.25](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.24...@react-navigation/bottom-tabs@5.0.0-alpha.25) (2019-12-11)
|
||||
|
||||
**Note:** Version bump only for package @react-navigation/bottom-tabs
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [5.0.0-alpha.24](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.23...@react-navigation/bottom-tabs@5.0.0-alpha.24) (2019-12-10)
|
||||
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ Bottom tab navigator for React Navigation following iOS design guidelines.
|
||||
Open a Terminal in your project's folder and run,
|
||||
|
||||
```sh
|
||||
yarn add @react-navigation/core @react-navigation/bottom-tabs
|
||||
yarn add @react-navigation/native @react-navigation/bottom-tabs
|
||||
```
|
||||
|
||||
Now we need to install [`react-native-safe-area-context`](https://github.com/th3rdwave/react-native-safe-area-context).
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
"android",
|
||||
"tab"
|
||||
],
|
||||
"version": "5.0.0-alpha.24",
|
||||
"version": "5.0.0-alpha.25",
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
@@ -33,7 +33,7 @@
|
||||
"clean": "del lib"
|
||||
},
|
||||
"dependencies": {
|
||||
"@react-navigation/routers": "^5.0.0-alpha.15"
|
||||
"@react-navigation/routers": "^5.0.0-alpha.16"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@react-native-community/bob": "^0.7.0",
|
||||
@@ -46,7 +46,7 @@
|
||||
"typescript": "^3.7.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@react-navigation/core": "^5.0.0-alpha.0",
|
||||
"@react-navigation/native": "^5.0.0-alpha.0",
|
||||
"react": "*",
|
||||
"react-native": "*",
|
||||
"react-native-safe-area-context": "^0.3.6"
|
||||
|
||||
@@ -3,7 +3,7 @@ import {
|
||||
useNavigationBuilder,
|
||||
createNavigatorFactory,
|
||||
DefaultNavigatorOptions,
|
||||
} from '@react-navigation/core';
|
||||
} from '@react-navigation/native';
|
||||
import {
|
||||
TabRouter,
|
||||
TabRouterOptions,
|
||||
|
||||
@@ -10,7 +10,7 @@ import {
|
||||
NavigationProp,
|
||||
ParamListBase,
|
||||
Descriptor,
|
||||
} from '@react-navigation/core';
|
||||
} from '@react-navigation/native';
|
||||
import { TabNavigationState } from '@react-navigation/routers';
|
||||
|
||||
export type BottomTabNavigationEventMap = {
|
||||
|
||||
@@ -13,7 +13,7 @@ import {
|
||||
Route,
|
||||
NavigationContext,
|
||||
CommonActions,
|
||||
} from '@react-navigation/core';
|
||||
} from '@react-navigation/native';
|
||||
import { SafeAreaConsumer } from 'react-native-safe-area-context';
|
||||
|
||||
import BottomTabItem from './BottomTabItem';
|
||||
|
||||
@@ -8,7 +8,7 @@ import {
|
||||
ViewStyle,
|
||||
TextStyle,
|
||||
} from 'react-native';
|
||||
import { Route } from '@react-navigation/core';
|
||||
import { Route } from '@react-navigation/native';
|
||||
|
||||
import TabBarIcon from './TabBarIcon';
|
||||
import { BottomTabBarButtonProps } from '../types';
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
|
||||
import { Route } from '@react-navigation/core';
|
||||
import { Route } from '@react-navigation/native';
|
||||
|
||||
type Props = {
|
||||
route: Route<string>;
|
||||
|
||||
@@ -3,6 +3,14 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
# [5.0.0-alpha.17](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/compat@5.0.0-alpha.16...@react-navigation/compat@5.0.0-alpha.17) (2019-12-11)
|
||||
|
||||
**Note:** Version bump only for package @react-navigation/compat
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [5.0.0-alpha.16](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/compat@5.0.0-alpha.15...@react-navigation/compat@5.0.0-alpha.16) (2019-12-10)
|
||||
|
||||
**Note:** Version bump only for package @react-navigation/compat
|
||||
|
||||
@@ -7,7 +7,7 @@ Compatibility layer to write navigator definitions in static configuration forma
|
||||
Open a Terminal in your project's folder and run,
|
||||
|
||||
```sh
|
||||
yarn add @react-navigation/core @react-navigation/compat
|
||||
yarn add @react-navigation/native @react-navigation/compat
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "@react-navigation/compat",
|
||||
"description": "Compatibility layer to write navigator definitions in static configuration format",
|
||||
"version": "5.0.0-alpha.16",
|
||||
"version": "5.0.0-alpha.17",
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
@@ -24,7 +24,7 @@
|
||||
"clean": "del lib"
|
||||
},
|
||||
"dependencies": {
|
||||
"@react-navigation/routers": "^5.0.0-alpha.15"
|
||||
"@react-navigation/routers": "^5.0.0-alpha.16"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^16.9.11",
|
||||
@@ -32,7 +32,7 @@
|
||||
"typescript": "^3.7.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@react-navigation/core": "^5.0.0-alpha.0",
|
||||
"@react-navigation/native": "^5.0.0-alpha.0",
|
||||
"react": "~16.9.0"
|
||||
},
|
||||
"@react-native-community/bob": {
|
||||
|
||||
@@ -3,7 +3,7 @@ import {
|
||||
NavigationProp,
|
||||
ParamListBase,
|
||||
RouteProp,
|
||||
} from '@react-navigation/core';
|
||||
} from '@react-navigation/native';
|
||||
import ScreenPropsContext from './ScreenPropsContext';
|
||||
import createCompatNavigationProp from './createCompatNavigationProp';
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { CommonActions, NavigationState } from '@react-navigation/core';
|
||||
import { CommonActions, NavigationState } from '@react-navigation/native';
|
||||
|
||||
export function navigate({
|
||||
routeName,
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { CommonActions } from '@react-navigation/core';
|
||||
import { CommonActions } from '@react-navigation/native';
|
||||
import { StackActions, StackActionType } from '@react-navigation/routers';
|
||||
|
||||
export function reset(): CommonActions.Action {
|
||||
|
||||
@@ -4,7 +4,7 @@ import {
|
||||
ParamListBase,
|
||||
NavigationProp,
|
||||
RouteProp,
|
||||
} from '@react-navigation/core';
|
||||
} from '@react-navigation/native';
|
||||
import * as helpers from './helpers';
|
||||
import { CompatNavigationProp } from './types';
|
||||
|
||||
|
||||
@@ -6,7 +6,7 @@ import {
|
||||
TypedNavigator,
|
||||
NavigationProp,
|
||||
RouteProp,
|
||||
} from '@react-navigation/core';
|
||||
} from '@react-navigation/native';
|
||||
import CompatScreen from './CompatScreen';
|
||||
import ScreenPropsContext from './ScreenPropsContext';
|
||||
import createCompatNavigationProp from './createCompatNavigationProp';
|
||||
|
||||
@@ -2,7 +2,7 @@ import {
|
||||
useNavigationBuilder,
|
||||
createNavigatorFactory,
|
||||
DefaultNavigatorOptions,
|
||||
} from '@react-navigation/core';
|
||||
} from '@react-navigation/native';
|
||||
import {
|
||||
TabRouter,
|
||||
TabRouterOptions,
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { ParamListBase, NavigationProp, Route } from '@react-navigation/core';
|
||||
import { ParamListBase, NavigationProp, Route } from '@react-navigation/native';
|
||||
import * as helpers from './helpers';
|
||||
|
||||
export type CompatNavigationProp<
|
||||
|
||||
@@ -4,7 +4,7 @@ import {
|
||||
useRoute,
|
||||
NavigationProp,
|
||||
ParamListBase,
|
||||
} from '@react-navigation/core';
|
||||
} from '@react-navigation/native';
|
||||
import createCompatNavigationProp from './createCompatNavigationProp';
|
||||
import { CompatNavigationProp } from './types';
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import * as React from 'react';
|
||||
import { NavigationProp, ParamListBase } from '@react-navigation/core';
|
||||
import { NavigationProp, ParamListBase } from '@react-navigation/native';
|
||||
import useCompatNavigation from './useCompatNavigation';
|
||||
import { CompatNavigationProp } from './types';
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import * as React from 'react';
|
||||
import { useIsFocused } from '@react-navigation/core';
|
||||
import { useIsFocused } from '@react-navigation/native';
|
||||
|
||||
type InjectedProps = {
|
||||
isFocused: boolean;
|
||||
|
||||
@@ -3,6 +3,14 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
# [5.0.0-alpha.27](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.26...@react-navigation/drawer@5.0.0-alpha.27) (2019-12-11)
|
||||
|
||||
**Note:** Version bump only for package @react-navigation/drawer
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [5.0.0-alpha.26](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.25...@react-navigation/drawer@5.0.0-alpha.26) (2019-12-10)
|
||||
|
||||
**Note:** Version bump only for package @react-navigation/drawer
|
||||
|
||||
@@ -7,7 +7,7 @@ Bottom tab navigator for React Navigation following iOS design guidelines.
|
||||
Open a Terminal in your project's folder and run,
|
||||
|
||||
```sh
|
||||
yarn add @react-navigation/core @react-navigation/drawer
|
||||
yarn add @react-navigation/native @react-navigation/drawer
|
||||
```
|
||||
|
||||
Now we need to install [`react-native-gesture-handler`](https://github.com/kmagiera/react-native-gesture-handler), [`react-native-reanimated`](https://github.com/kmagiera/react-native-reanimated) and [`react-native-safe-area-context`](https://github.com/th3rdwave/react-native-safe-area-context).
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
"material",
|
||||
"drawer"
|
||||
],
|
||||
"version": "5.0.0-alpha.26",
|
||||
"version": "5.0.0-alpha.27",
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
@@ -34,7 +34,7 @@
|
||||
"clean": "del lib"
|
||||
},
|
||||
"dependencies": {
|
||||
"@react-navigation/routers": "^5.0.0-alpha.15"
|
||||
"@react-navigation/routers": "^5.0.0-alpha.16"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@react-native-community/bob": "^0.7.0",
|
||||
@@ -50,7 +50,7 @@
|
||||
"typescript": "^3.7.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@react-navigation/core": "^5.0.0-alpha.0",
|
||||
"@react-navigation/native": "^5.0.0-alpha.0",
|
||||
"react": "*",
|
||||
"react-native": "*",
|
||||
"react-native-gesture-handler": "^1.0.0",
|
||||
|
||||
@@ -3,7 +3,7 @@ import {
|
||||
createNavigatorFactory,
|
||||
useNavigationBuilder,
|
||||
DefaultNavigatorOptions,
|
||||
} from '@react-navigation/core';
|
||||
} from '@react-navigation/native';
|
||||
import {
|
||||
DrawerNavigationState,
|
||||
DrawerRouterOptions,
|
||||
|
||||
@@ -6,7 +6,7 @@ import {
|
||||
NavigationProp,
|
||||
Descriptor,
|
||||
NavigationHelpers,
|
||||
} from '@react-navigation/core';
|
||||
} from '@react-navigation/native';
|
||||
import { DrawerNavigationState } from '@react-navigation/routers';
|
||||
import { PanGestureHandler } from 'react-native-gesture-handler';
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import * as React from 'react';
|
||||
import { CommonActions } from '@react-navigation/core';
|
||||
import { CommonActions } from '@react-navigation/native';
|
||||
import {
|
||||
DrawerActions,
|
||||
DrawerNavigationState,
|
||||
|
||||
@@ -3,6 +3,14 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
# [5.0.0-alpha.24](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-bottom-tabs@5.0.0-alpha.23...@react-navigation/material-bottom-tabs@5.0.0-alpha.24) (2019-12-11)
|
||||
|
||||
**Note:** Version bump only for package @react-navigation/material-bottom-tabs
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [5.0.0-alpha.23](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-bottom-tabs@5.0.0-alpha.22...@react-navigation/material-bottom-tabs@5.0.0-alpha.23) (2019-12-10)
|
||||
|
||||
**Note:** Version bump only for package @react-navigation/material-bottom-tabs
|
||||
|
||||
@@ -7,7 +7,7 @@ React Navigation integration for [bottom navigation](https://material.io/design/
|
||||
Open a Terminal in your project's folder and run,
|
||||
|
||||
```sh
|
||||
yarn add @react-navigation/core @react-navigation/material-bottom-tabs
|
||||
yarn add @react-navigation/native @react-navigation/material-bottom-tabs
|
||||
```
|
||||
|
||||
Setup `react-native-paper` following the [Getting Started guide](https://callstack.github.io/react-native-paper/getting-started.html).
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
"material",
|
||||
"tab"
|
||||
],
|
||||
"version": "5.0.0-alpha.23",
|
||||
"version": "5.0.0-alpha.24",
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
@@ -34,7 +34,7 @@
|
||||
"clean": "del lib"
|
||||
},
|
||||
"dependencies": {
|
||||
"@react-navigation/routers": "^5.0.0-alpha.15"
|
||||
"@react-navigation/routers": "^5.0.0-alpha.16"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@react-native-community/bob": "^0.7.0",
|
||||
@@ -49,7 +49,7 @@
|
||||
"typescript": "^3.7.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@react-navigation/core": "^5.0.0-alpha.0",
|
||||
"@react-navigation/native": "^5.0.0-alpha.0",
|
||||
"react": "*",
|
||||
"react-native": "*",
|
||||
"react-native-paper": "^3.0.0",
|
||||
|
||||
@@ -3,7 +3,7 @@ import {
|
||||
useNavigationBuilder,
|
||||
createNavigatorFactory,
|
||||
DefaultNavigatorOptions,
|
||||
} from '@react-navigation/core';
|
||||
} from '@react-navigation/native';
|
||||
import {
|
||||
TabRouter,
|
||||
TabRouterOptions,
|
||||
|
||||
@@ -4,7 +4,7 @@ import {
|
||||
Descriptor,
|
||||
NavigationProp,
|
||||
NavigationHelpers,
|
||||
} from '@react-navigation/core';
|
||||
} from '@react-navigation/native';
|
||||
import { TabNavigationState } from '@react-navigation/routers';
|
||||
|
||||
export type MaterialBottomTabNavigationEventMap = {
|
||||
|
||||
@@ -2,7 +2,7 @@ import * as React from 'react';
|
||||
import { StyleSheet } from 'react-native';
|
||||
import { BottomNavigation } from 'react-native-paper';
|
||||
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
|
||||
import { Route } from '@react-navigation/core';
|
||||
import { Route } from '@react-navigation/native';
|
||||
import { TabNavigationState, TabActions } from '@react-navigation/routers';
|
||||
|
||||
import {
|
||||
|
||||
@@ -3,6 +3,14 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
# [5.0.0-alpha.22](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-top-tabs@5.0.0-alpha.21...@react-navigation/material-top-tabs@5.0.0-alpha.22) (2019-12-11)
|
||||
|
||||
**Note:** Version bump only for package @react-navigation/material-top-tabs
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [5.0.0-alpha.21](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-top-tabs@5.0.0-alpha.20...@react-navigation/material-top-tabs@5.0.0-alpha.21) (2019-12-10)
|
||||
|
||||
**Note:** Version bump only for package @react-navigation/material-top-tabs
|
||||
|
||||
@@ -7,7 +7,7 @@ React Navigation integration for animated tab view component from [`react-native
|
||||
Open a Terminal in your project's folder and run,
|
||||
|
||||
```sh
|
||||
yarn add @react-navigation/core @react-navigation/material-top-tabs react-native-tab-view
|
||||
yarn add @react-navigation/native @react-navigation/material-top-tabs react-native-tab-view
|
||||
```
|
||||
|
||||
Now we need to install [`react-native-gesture-handler`](https://github.com/kmagiera/react-native-gesture-handler) and [`react-native-reanimated`](https://github.com/kmagiera/react-native-reanimated)..
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
"material",
|
||||
"tab"
|
||||
],
|
||||
"version": "5.0.0-alpha.21",
|
||||
"version": "5.0.0-alpha.22",
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
@@ -34,7 +34,7 @@
|
||||
"clean": "del lib"
|
||||
},
|
||||
"dependencies": {
|
||||
"@react-navigation/routers": "^5.0.0-alpha.15"
|
||||
"@react-navigation/routers": "^5.0.0-alpha.16"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@react-native-community/bob": "^0.7.0",
|
||||
@@ -49,7 +49,7 @@
|
||||
"typescript": "^3.7.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@react-navigation/core": "^5.0.0-alpha.0",
|
||||
"@react-navigation/native": "^5.0.0-alpha.0",
|
||||
"react": "*",
|
||||
"react-native": "*",
|
||||
"react-native-gesture-handler": "^1.0.0",
|
||||
|
||||
@@ -3,7 +3,7 @@ import {
|
||||
useNavigationBuilder,
|
||||
createNavigatorFactory,
|
||||
DefaultNavigatorOptions,
|
||||
} from '@react-navigation/core';
|
||||
} from '@react-navigation/native';
|
||||
import {
|
||||
TabRouter,
|
||||
TabRouterOptions,
|
||||
|
||||
@@ -6,7 +6,7 @@ import {
|
||||
NavigationHelpers,
|
||||
Route,
|
||||
NavigationProp,
|
||||
} from '@react-navigation/core';
|
||||
} from '@react-navigation/native';
|
||||
import { TabNavigationState } from '@react-navigation/routers';
|
||||
|
||||
export type MaterialTopTabNavigationEventMap = {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import * as React from 'react';
|
||||
import { View, Text, StyleSheet } from 'react-native';
|
||||
import { TabBar } from 'react-native-tab-view';
|
||||
import { Route } from '@react-navigation/core';
|
||||
import { Route } from '@react-navigation/native';
|
||||
|
||||
import { MaterialTopTabBarProps } from '../types';
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import * as React from 'react';
|
||||
import { TabView, SceneRendererProps } from 'react-native-tab-view';
|
||||
import { Route } from '@react-navigation/core';
|
||||
import { Route } from '@react-navigation/native';
|
||||
import { TabNavigationState, TabActions } from '@react-navigation/routers';
|
||||
|
||||
import MaterialTopTabBar from './MaterialTopTabBar';
|
||||
|
||||
@@ -3,6 +3,14 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
# [5.0.0-alpha.16](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.15...@react-navigation/native-stack@5.0.0-alpha.16) (2019-12-11)
|
||||
|
||||
**Note:** Version bump only for package @react-navigation/native-stack
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [5.0.0-alpha.15](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.14...@react-navigation/native-stack@5.0.0-alpha.15) (2019-12-07)
|
||||
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ Expo is currently not supported as it includes an older version of `react-native
|
||||
Open a Terminal in your project's folder and run,
|
||||
|
||||
```sh
|
||||
yarn add @react-navigation/core @react-navigation/native-stack
|
||||
yarn add @react-navigation/native @react-navigation/native-stack
|
||||
```
|
||||
|
||||
Now we need to install [`react-native-screens`](https://github.com/kmagiera/react-native-screens).
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
"react-native",
|
||||
"react-navigation"
|
||||
],
|
||||
"version": "5.0.0-alpha.15",
|
||||
"version": "5.0.0-alpha.16",
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
@@ -29,7 +29,7 @@
|
||||
"clean": "del lib"
|
||||
},
|
||||
"dependencies": {
|
||||
"@react-navigation/routers": "^5.0.0-alpha.15"
|
||||
"@react-navigation/routers": "^5.0.0-alpha.16"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@react-native-community/bob": "^0.7.0",
|
||||
@@ -38,7 +38,7 @@
|
||||
"typescript": "^3.7.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@react-navigation/core": "^5.0.0-alpha.0",
|
||||
"@react-navigation/native": "^5.0.0-alpha.0",
|
||||
"react": "*",
|
||||
"react-native": "*",
|
||||
"react-native-screens": "^2.0.0-alpha.8"
|
||||
|
||||
@@ -3,7 +3,7 @@ import {
|
||||
createNavigatorFactory,
|
||||
useNavigationBuilder,
|
||||
EventArg,
|
||||
} from '@react-navigation/core';
|
||||
} from '@react-navigation/native';
|
||||
|
||||
import {
|
||||
StackRouter,
|
||||
|
||||
@@ -6,7 +6,7 @@ import {
|
||||
NavigationHelpers,
|
||||
NavigationProp,
|
||||
ParamListBase,
|
||||
} from '@react-navigation/core';
|
||||
} from '@react-navigation/native';
|
||||
import {
|
||||
StackNavigationState,
|
||||
StackRouterOptions,
|
||||
|
||||
@@ -6,7 +6,7 @@ import {
|
||||
ScreenStackHeaderRightView,
|
||||
// eslint-disable-next-line import/no-unresolved
|
||||
} from 'react-native-screens';
|
||||
import { Route } from '@react-navigation/core';
|
||||
import { Route } from '@react-navigation/native';
|
||||
import { NativeStackNavigationOptions } from '../types';
|
||||
|
||||
type Props = NativeStackNavigationOptions & {
|
||||
|
||||
@@ -3,6 +3,14 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
# [5.0.0-alpha.18](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native@5.0.0-alpha.17...@react-navigation/native@5.0.0-alpha.18) (2019-12-11)
|
||||
|
||||
**Note:** Version bump only for package @react-navigation/native
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [5.0.0-alpha.17](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native@5.0.0-alpha.16...@react-navigation/native@5.0.0-alpha.17) (2019-12-10)
|
||||
|
||||
**Note:** Version bump only for package @react-navigation/native
|
||||
|
||||
@@ -7,7 +7,7 @@ React Native integration for React Navigation
|
||||
Open a Terminal in your project's folder and run,
|
||||
|
||||
```sh
|
||||
yarn add @react-navigation/core @react-navigation/native
|
||||
yarn add @react-navigation/native
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
"ios",
|
||||
"android"
|
||||
],
|
||||
"version": "5.0.0-alpha.17",
|
||||
"version": "5.0.0-alpha.18",
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
@@ -29,6 +29,9 @@
|
||||
"prepare": "bob build",
|
||||
"clean": "del lib"
|
||||
},
|
||||
"dependencies": {
|
||||
"@react-navigation/core": "^5.0.0-alpha.27"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@react-native-community/bob": "^0.7.0",
|
||||
"@types/react": "^16.9.11",
|
||||
@@ -39,7 +42,6 @@
|
||||
"typescript": "^3.7.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@react-navigation/core": "^5.0.0-alpha.0",
|
||||
"react": "*",
|
||||
"react-native": "*"
|
||||
},
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
export * from '@react-navigation/core';
|
||||
|
||||
export { default as NavigationNativeContainer } from './NavigationNativeContainer';
|
||||
|
||||
export { default as useBackButton } from './useBackButton';
|
||||
|
||||
@@ -3,6 +3,14 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
# [5.0.0-alpha.16](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/routers@5.0.0-alpha.15...@react-navigation/routers@5.0.0-alpha.16) (2019-12-11)
|
||||
|
||||
**Note:** Version bump only for package @react-navigation/routers
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [5.0.0-alpha.15](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/routers@5.0.0-alpha.14...@react-navigation/routers@5.0.0-alpha.15) (2019-11-17)
|
||||
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ You probably don't need to use this package directly if you're not building cust
|
||||
Open a Terminal in your project's folder and run,
|
||||
|
||||
```sh
|
||||
yarn add @react-navigation/core @react-navigation/routers
|
||||
yarn add @react-navigation/routers
|
||||
```
|
||||
|
||||
## Usage
|
||||
@@ -17,7 +17,7 @@ yarn add @react-navigation/core @react-navigation/routers
|
||||
A basic custom navigator bundling a router and a view looks like this:
|
||||
|
||||
```js
|
||||
import { createNavigatorFactory, useNavigationBuilder } from '@react-navigation/core';
|
||||
import { createNavigatorFactory, useNavigationBuilder } from '@react-navigation/native';
|
||||
import { StackRouter } from '@react-navigation/routers';
|
||||
|
||||
function StackNavigator({ initialRouteName, children, ...rest }) {
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
"react-native",
|
||||
"react-navigation"
|
||||
],
|
||||
"version": "5.0.0-alpha.15",
|
||||
"version": "5.0.0-alpha.16",
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
@@ -29,6 +29,7 @@
|
||||
"clean": "del lib"
|
||||
},
|
||||
"dependencies": {
|
||||
"@react-navigation/core": "^5.0.0-alpha.27",
|
||||
"shortid": "^2.2.15"
|
||||
},
|
||||
"devDependencies": {
|
||||
@@ -36,9 +37,6 @@
|
||||
"del-cli": "^3.0.0",
|
||||
"typescript": "^3.7.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@react-navigation/core": "^5.0.0-alpha.0"
|
||||
},
|
||||
"@react-native-community/bob": {
|
||||
"source": "src",
|
||||
"output": "lib",
|
||||
|
||||
@@ -3,6 +3,25 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
# [5.0.0-alpha.43](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.42...@react-navigation/stack@5.0.0-alpha.43) (2019-12-11)
|
||||
|
||||
**Note:** Version bump only for package @react-navigation/stack
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [5.0.0-alpha.42](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.41...@react-navigation/stack@5.0.0-alpha.42) (2019-12-10)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* expose animation related values in context ([6cddb52](https://github.com/react-navigation/navigation-ex/commit/6cddb5238c0b1e37238c85c76e2ecb1f81517c19))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [5.0.0-alpha.41](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.40...@react-navigation/stack@5.0.0-alpha.41) (2019-12-10)
|
||||
|
||||
**Note:** Version bump only for package @react-navigation/stack
|
||||
|
||||
@@ -7,7 +7,7 @@ Stack navigator for React Navigation.
|
||||
Open a Terminal in your project's folder and run,
|
||||
|
||||
```sh
|
||||
yarn add @react-navigation/core @react-navigation/stack @react-native-community/masked-view
|
||||
yarn add @react-navigation/native @react-navigation/stack @react-native-community/masked-view
|
||||
```
|
||||
|
||||
Now we need to install [`react-native-gesture-handler`](https://github.com/kmagiera/react-native-gesture-handler), [`react-native-reanimated`](https://github.com/kmagiera/react-native-reanimated), [`react-native-screens`](https://github.com/kmagiera/react-native-screens) and [`react-native-safe-area-context`](https://github.com/th3rdwave/react-native-safe-area-context).
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
"android",
|
||||
"stack"
|
||||
],
|
||||
"version": "5.0.0-alpha.41",
|
||||
"version": "5.0.0-alpha.43",
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
@@ -33,7 +33,7 @@
|
||||
"clean": "del lib"
|
||||
},
|
||||
"dependencies": {
|
||||
"@react-navigation/routers": "^5.0.0-alpha.15"
|
||||
"@react-navigation/routers": "^5.0.0-alpha.16"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@react-native-community/bob": "^0.7.0",
|
||||
@@ -51,7 +51,7 @@
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@react-native-community/masked-view": "^0.1.1",
|
||||
"@react-navigation/core": "^5.0.0-alpha.0",
|
||||
"@react-navigation/native": "^5.0.0-alpha.0",
|
||||
"react": "*",
|
||||
"react-native": "*",
|
||||
"react-native-gesture-handler": "^1.0.0",
|
||||
|
||||
@@ -35,6 +35,7 @@ export {
|
||||
* Utilities
|
||||
*/
|
||||
export { default as StackGestureContext } from './utils/StackGestureContext';
|
||||
export { default as StackCardAnimationContext } from './utils/StackCardAnimationContext';
|
||||
|
||||
/**
|
||||
* Types
|
||||
|
||||
@@ -4,7 +4,7 @@ import {
|
||||
createNavigatorFactory,
|
||||
DefaultNavigatorOptions,
|
||||
EventArg,
|
||||
} from '@react-navigation/core';
|
||||
} from '@react-navigation/native';
|
||||
import {
|
||||
StackRouter,
|
||||
StackRouterOptions,
|
||||
|
||||
@@ -12,7 +12,7 @@ import {
|
||||
Descriptor,
|
||||
Route,
|
||||
NavigationHelpers,
|
||||
} from '@react-navigation/core';
|
||||
} from '@react-navigation/native';
|
||||
import { StackNavigationState } from '@react-navigation/routers';
|
||||
|
||||
export type StackNavigationEventMap = {
|
||||
@@ -468,6 +468,10 @@ export type StackCardInterpolationProps = {
|
||||
* Animated node representing whether the card is closing.
|
||||
*/
|
||||
closing: Animated.Node<0 | 1>;
|
||||
/**
|
||||
* Animated node representing whether the card is being swiped.
|
||||
*/
|
||||
swiping: Animated.Node<0 | 1>;
|
||||
/**
|
||||
* Animated node representing multiplier when direction is inverted.
|
||||
*/
|
||||
|
||||
6
packages/stack/src/utils/StackCardAnimationContext.tsx
Normal file
6
packages/stack/src/utils/StackCardAnimationContext.tsx
Normal file
@@ -0,0 +1,6 @@
|
||||
import * as React from 'react';
|
||||
import { StackCardInterpolationProps } from '../types';
|
||||
|
||||
export default React.createContext<StackCardInterpolationProps | undefined>(
|
||||
undefined
|
||||
);
|
||||
@@ -4,7 +4,7 @@ import {
|
||||
NavigationContext,
|
||||
Route,
|
||||
ParamListBase,
|
||||
} from '@react-navigation/core';
|
||||
} from '@react-navigation/native';
|
||||
import { StackNavigationState } from '@react-navigation/routers';
|
||||
import { EdgeInsets } from 'react-native-safe-area-context';
|
||||
|
||||
|
||||
@@ -8,7 +8,7 @@ import {
|
||||
} from 'react-native';
|
||||
import Animated from 'react-native-reanimated';
|
||||
import { EdgeInsets } from 'react-native-safe-area-context';
|
||||
import { Route } from '@react-navigation/core';
|
||||
import { Route } from '@react-navigation/native';
|
||||
import HeaderBackButton from './HeaderBackButton';
|
||||
import HeaderBackground from './HeaderBackground';
|
||||
import memoize from '../../utils/memoize';
|
||||
|
||||
@@ -16,6 +16,7 @@ import animate, { Binary } from './CardAnimation';
|
||||
import PointerEventsView from './PointerEventsView';
|
||||
import memoize from '../../utils/memoize';
|
||||
import StackGestureContext from '../../utils/StackGestureContext';
|
||||
import StackCardAnimationContext from '../../utils/StackCardAnimationContext';
|
||||
import {
|
||||
TransitionSpec,
|
||||
StackCardStyleInterpolator,
|
||||
@@ -645,6 +646,7 @@ export default class Card extends React.Component<Props> {
|
||||
current: { progress: current },
|
||||
next: next && { progress: next },
|
||||
closing: this.isClosing,
|
||||
swiping: this.isSwiping,
|
||||
inverted: this.inverted,
|
||||
layouts: {
|
||||
screen: layout,
|
||||
@@ -674,6 +676,36 @@ export default class Card extends React.Component<Props> {
|
||||
this.props.insets.left
|
||||
);
|
||||
|
||||
// Keep track of the animation context when deps changes.
|
||||
private getCardAnimationContext = memoize(
|
||||
(
|
||||
index: number,
|
||||
current: Animated.Node<number>,
|
||||
next: Animated.Node<number> | undefined,
|
||||
layout: Layout,
|
||||
insetTop: number,
|
||||
insetRight: number,
|
||||
insetBottom: number,
|
||||
insetLeft: number
|
||||
) => ({
|
||||
index,
|
||||
current: { progress: current },
|
||||
next: next && { progress: next },
|
||||
closing: this.isClosing,
|
||||
swiping: this.isSwiping,
|
||||
inverted: this.inverted,
|
||||
layouts: {
|
||||
screen: layout,
|
||||
},
|
||||
insets: {
|
||||
top: insetTop,
|
||||
right: insetRight,
|
||||
bottom: insetBottom,
|
||||
left: insetLeft,
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
private gestureActivationCriteria() {
|
||||
const { layout, gestureDirection, gestureResponseDistance } = this.props;
|
||||
|
||||
@@ -757,6 +789,17 @@ export default class Card extends React.Component<Props> {
|
||||
);
|
||||
}
|
||||
|
||||
const animationContext = this.getCardAnimationContext(
|
||||
index,
|
||||
current,
|
||||
next,
|
||||
layout,
|
||||
insets.top,
|
||||
insets.right,
|
||||
insets.bottom,
|
||||
insets.left
|
||||
);
|
||||
|
||||
const {
|
||||
containerStyle,
|
||||
cardStyle,
|
||||
@@ -816,7 +859,9 @@ export default class Card extends React.Component<Props> {
|
||||
contentStyle,
|
||||
]}
|
||||
>
|
||||
{children}
|
||||
<StackCardAnimationContext.Provider value={animationContext}>
|
||||
{children}
|
||||
</StackCardAnimationContext.Provider>
|
||||
</PointerEventsView>
|
||||
</Animated.View>
|
||||
</PanGestureHandler>
|
||||
|
||||
@@ -2,7 +2,7 @@ import * as React from 'react';
|
||||
import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
|
||||
import Animated from 'react-native-reanimated';
|
||||
import { StackNavigationState } from '@react-navigation/routers';
|
||||
import { Route } from '@react-navigation/core';
|
||||
import { Route } from '@react-navigation/native';
|
||||
import { Props as HeaderContainerProps } from '../Header/HeaderContainer';
|
||||
import Card from './Card';
|
||||
import { Scene, Layout, StackHeaderMode, TransitionPreset } from '../../types';
|
||||
|
||||
@@ -11,7 +11,7 @@ import Animated from 'react-native-reanimated';
|
||||
import { EdgeInsets } from 'react-native-safe-area-context';
|
||||
// eslint-disable-next-line import/no-unresolved
|
||||
import * as Screens from 'react-native-screens'; // Import with * as to prevent getters being called
|
||||
import { Route } from '@react-navigation/core';
|
||||
import { Route } from '@react-navigation/native';
|
||||
import { StackNavigationState } from '@react-navigation/routers';
|
||||
|
||||
import { getDefaultHeaderHeight } from '../Header/HeaderSegment';
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import * as React from 'react';
|
||||
import { Platform } from 'react-native';
|
||||
import { SafeAreaConsumer, EdgeInsets } from 'react-native-safe-area-context';
|
||||
import { Route } from '@react-navigation/core';
|
||||
import { Route } from '@react-navigation/native';
|
||||
import { StackActions, StackNavigationState } from '@react-navigation/routers';
|
||||
|
||||
import CardStack from './CardStack';
|
||||
|
||||
Reference in New Issue
Block a user