EXTRAPOLATED.CLAMP在此代码中不起作用。我不明白为什么,有什么建议吗?
我是React开发的新手。我想在我的应用程序中添加一些动画,但是我对此卡住了。
这是我的进口货
import Animated, { Extrapolate, interpolate, add, diffClamp, } from 'react-native-reanimated';
import {
translate,
usePanGestureHandler,withDecay,withOffset,clamp} from "react-native-redash/lib/module/v1";
返回前的声明:
const {
gestureHandler,
translation,
velocity,
state,
} = usePanGestureHandler();
const X = diffClamp(withDecay({ value: translation.x, velocity: velocity.X, state: state }), -BlHouses.length * screenWidth + screenWidth, 0)
我的组件:
<PanGestureHandler {...gestureHandler}>
<Animated.View style={{ flexDirection: 'row', flex: 2 }}>
{Array.isArray(BlHouses) && BlHouses.map((BlHouse, index) => {
const translateX = interpolate(X, {
inputRange: [-screenWidth * index, 0],
outputRange: [-screenWidth * index, 0],
extrapolate: Extrapolate.CLAMP,
}
)
const positionX = add(X, index * screenWidth);
const isDisappearing = screenWidth;
const isOnLeft = 0;
const isOnRight = (index - 1) * screenWidth;
const isAppearing = (index + 1) * screenWidth;
const scale = interpolate(positionX, {
inputRange: [isOnRight, isOnLeft, isDisappearing, isAppearing,],
outputRange: [0.5, 1, 0.5, -0.5],
extrapolate: Extrapolate.CLAMP
})
const opacity = interpolate(positionX, {
inputRange: [isOnRight, isOnLeft, isDisappearing, isAppearing,],
outputRange: [0.5, 1, 0.5, -0.5],
extrapolate: Extrapolate.CLAMP
})
return (
<Animated.View key={index} style={[{ height: 270, width: screenWidth }, { opacity, transform: [{ translateX }, { scale: scale }] }]}>
<HouseHoldHeader
index={index}
maxIndex={BlHouses.length}
strName={BlHouses[index].str}
Nr={BlHouses[index].nr}
Bl={BlHouses[index].bl}
Sc={BlHouses[index].sc}
Ap={BlHouses[index].ap}
></HouseHoldHeader>
</Animated.View>
);
})}
</Animated.View>
</PanGestureHandler>