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

refactor: migrate to animated

Browse Source
This commit is contained in:
Satyajit Sahoo
2020-01-01 17:37:34 +01:00
parent c2570f3f55
commit 9ac1904862
14 changed files with 390 additions and 563 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
packages/stack/example/src/StackAnimationConsumerStack.tsx
View File

@@ -1,6 +1,5 @@
import * as React from 'react';
import { Button, View } from 'react-native';
import Animated from 'react-native-reanimated';
import { Animated, Button, View } from 'react-native';
import {
createStackNavigator,
NavigationStackScreenProps,
@@ -27,12 +26,12 @@ const ListScreen = (props: NavigationStackScreenProps) => (
const AnotherScreen = () => (
<StackCardAnimationContext.Consumer>
{value => {
const fontSize = value
? Animated.interpolate(value.current.progress, {
const scale = value
? value.current.progress.interpolate({
inputRange: [0, 1],
outputRange: [8, 32],
outputRange: [0.25, 1],
})
: 32;
: 1;
return (
<View
@@ -44,7 +43,11 @@ const AnotherScreen = () => (
}}
>
<Animated.Text
style={{ fontSize, opacity: value ? value.current.progress : 1 }}
style={{
fontSize: 32,
opacity: value ? value.current.progress : 1,
transform: [{ scale }],
}}
>
Animates on progress
</Animated.Text>
@@ -69,7 +72,7 @@ const YetAnotherScreen = () => (
style={{
fontSize: 24,
opacity: value
? Animated.interpolate(value.swiping, {
? value.swiping.interpolate({
inputRange: [0, 1],
outputRange: [1, 0],
})
@@ -86,7 +89,7 @@ const YetAnotherScreen = () => (
style={{
fontSize: 24,
opacity: value
? Animated.interpolate(value.closing, {
? value.closing.interpolate({
inputRange: [0, 1],
outputRange: [1, 0],
})