Question

实现此目标的方式是什么。

使用Animated.event进行回调可以正常工作

带有block的回调没有反馈：（

import React, { useState, useEffect } from "react";
import { View, Text, FlatList, Dimensions, Image } from "react-native";
import Animated from "react-native-reanimated";
import { PanGestureHandler, TapGestureHandler, State } from "react-native-gesture-handler";
const { Value, event, call, set, add, block } = Animated;

const bottom = new Value(100);

//want to achieve something like this 
const onHandlerStateChange = block([set(bottom, add(bottom, 10))]);

// the line below Does work 
// const onHandlerStateChange = event([{ nativeEvent: { y: bottom } }]); 

const Comp = () => {
    return (
        <TapGestureHandler onHandlerStateChange={onHandlerStateChange}>
            <Animated.View style={{ flex: 1}}>
                <Animated.View style={{ flex: 1, position: "absolute", bottom: bottom }}>
                    <Text> some text</Text>
                </Animated.View>
            </Animated.View>
        </TapGestureHandler>
    );
};

export default Comp;

* const onHandlerStateChange = block（[set（bottom，add（bottom，10））]）; * 在这里不起作用

Answer 1

这是有效的解决方案
提示： 了解复活如何评估节点将非常有用
这是官方文档的链接，可帮助您了解
https://software-mansion.github.io/react-native-reanimated/about-reanimated.html#at-most-once-evaluation-the-algorithm-

import React, { useState, useEffect } from "react";
import { View, Text, FlatList, Dimensions, Image } from "react-native";
import Animated from "react-native-reanimated";
import {
    PanGestureHandler,
    TapGestureHandler,
    State,
} from "react-native-gesture-handler";
const { Value, event, call, set, add, cond, eq, block } = Animated;

const gstate = new Value(-1);
const onHandlerStateChange = event([{ nativeEvent: { state: gstate } }]);

let bottom = new Value(100);
bottom = cond(eq(gstate, State.END), [set(bottom, add(bottom, 10))], bottom);

const Comp = () => {
    return (
        <TapGestureHandler onHandlerStateChange={onHandlerStateChange}>
            <Animated.View style={{ flex: 1, backgroundColor: "pink" }}>
                <Animated.View
                    style={{ flex: 1, position: "absolute", bottom: bottom }}
                >
                    <Text> some text</Text>
                </Animated.View>
            </Animated.View>
        </TapGestureHandler>
    );
};

export default Comp;

使用块重新激活了TapGestureHandler回调

1 个答案: