Javascript 当我向下滑动到屏幕结束时,当滑动停止工作时,如何修复错误?
所以,我用react native redash和reanimated创建了一个滑动。这是我的密码: const{width,height}=Dimensions.get(“窗口”)Javascript 当我向下滑动到屏幕结束时,当滑动停止工作时,如何修复错误?,javascript,css,reactjs,react-native,Javascript,Css,Reactjs,React Native,所以,我用react native redash和reanimated创建了一个滑动。这是我的密码: const{width,height}=Dimensions.get(“窗口”) const styles=StyleSheet.create({ 时间容器:{ }, 正文:{ 尺寸:30, }, 显示:{ marginTop:高度/2, 对齐项目:“居中”, }, }); const TEXT_HEIGHT=styles.TEXT.fontSize*1.34; 常量应用=()=>{ const
const styles=StyleSheet.create({
时间容器:{
},
正文:{
尺寸:30,
},
显示:{
marginTop:高度/2,
对齐项目:“居中”,
},
});
const TEXT_HEIGHT=styles.TEXT.fontSize*1.34;
常量应用=()=>{
const[containerHeight,setContainerHeight]=使用状态(高度);
const SampleFunction=(项)=>{
警报。警报(项目);
}
设数字=新数组(41);
for(设i=0,num=0;i
{numbers.map((项目,索引)=>{
返回(
{item}
);
})}
)
};
导出默认应用程序;
所以,当我向下滑动到屏幕的最末端时,滑动就是不起作用。当我添加样式道具“marginTop:height/2”时,这个bug出现了。我添加它是因为我希望我的数组从屏幕中间开始。我怎样才能解决这个问题
const styles = StyleSheet.create({
timeContainer: {
},
text: {
fontSize: 30,
},
display: {
marginTop: height / 2,
alignItems: 'center',
},
});
const TEXT_HEIGHT = styles.text.fontSize * 1.34;
const App = () => {
const [containerHeight, setContainerHeight] = useState(height);
const SampleFunction = (item) => {
Alert.alert(item);
}
let numbers = new Array(41);
for (let i = 0, num = 0; i < numbers.length; i++, num += 5) {
numbers[i] = num;
}
const {
gestureHandler,
translation,
velocity,
state,
} = usePanGestureHandler();
const translateY = diffClamp(withDecay({
value: translation.y,
velocity: velocity.y,
state,
}),
-numbers.length * TEXT_HEIGHT + containerHeight - height,
0
);
return (
<View style={styles.display}>
<PanGestureHandler
{...gestureHandler}
onLayout={({
nativeEvent: {
layout: { height: h },
},
}) => setContainerHeight(h)}
>
<Animated.View style={styles.timeContainer}>
{numbers.map((item, index) => {
return (
<Animated.View
key={index}
style={[
{ transform: [{ translateY }] },
]}
>
<Text style={styles.text} onPress={SampleFunction.bind(item)}>{item}</Text>
</Animated.View>
);
})}
</Animated.View>
</PanGestureHandler>
</View>
)
};
export default App;