Всем привет. Делаю анимацию с помощью reanimated2 и react native

const GoalsScreen: React.FC<Props> = ({ navigation }) => { const { t } = useTranslation('goals') const dimensions = useWindowDimensions() const top = useSharedValue(dimensions.height / 2) const gestureHandler = useAnimatedGestureHandler<PanGestureHandlerGestureEvent, { startTop: number }>({ onStart(_, context) { context.startTop = top.value }, onActive(event, context) { top.value = context.startTop + event.translationY }, onEnd() { if (top.value > dimensions.height / 2 + 200) { top.value = dimensions.height } else { top.value = dimensions.height / 2 } } }) const style = useAnimatedStyle(() => { return { transform: [ { translateY: withSpring(top.value) } ] } }) const handlePress = React.useCallback(() => { top.value = 0 }, [top.value]) return ( <SafeAreaView style={styles.container}> <View style={styles.inner}> <View style={styles.row}> <Button text={'Home'} onPress={() => navigation.navigate(RootScreens.Home as any)} /> <Button text={'Bottom Sheet'} onPress={handlePress} /> </View> </View> <PanGestureHandler onGestureEvent={gestureHandler} > <Animated.View style={[ { position: 'absolute', top: dimensions.height / 2, left: 0, right: 0, bottom: 0, backgroundColor: 'white', borderTopLeftRadius: 20, borderTopRightRadius: 20, shadowColor: '#000', shadowOffset: { width: 0, height: 2, }, shadowOpacity: 0.25, shadowRadius: 3.84, padding: 20, justifyContent: 'center', alignItems: 'center' }, style ]} > <Text>Sheet</Text> </Animated.View> </PanGestureHandler> </SafeAreaView> ); }; export default GoalsScreen; Вот код. Пример с ютуба

0

06.10.2021

dan Andreev

Ilya Lopatin
Такой же ефект. Реальное устройство - iphone 11 пр...

а на существующие решения смотрел? есть же готовые ботомшиты на реанимейтед написаные

0

06.10.2021

Ilya Lopatin Автор вопроса

dan Andreev
а на существующие решения смотрел? есть же готовые...

Так я учусь) Я с фронта пришел (react.js) Просто интересно чего не могу сделать быструю анимацию.

0

06.10.2021