Javascript 当我向下滑动到屏幕结束时,当滑动停止工作时,如何修复错误?

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

所以,我用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[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;