React native Expo:JS的错误调用:字段大小不同

React native Expo:JS的错误调用:字段大小不同,react-native,animation,expo,React Native,Animation,Expo,我正在expo(react native)应用程序中创建可拖动视图。我正在使用来自react native的PanResponder API。一旦我开始拖动视图,它就会崩溃并显示此错误。我把代码放在try-catch块中,在控制台上得到了这个错误。 我正在关注这一点。我有与本教程完全相同的代码,但区别在于他使用的是类组件,而我使用的是函数组件 请帮我解决这个错误。 感谢您的帮助只需在onPanResponderMove中为x指定一个值即可 在这里,你不需要沿着x平移。那就0吧 onPanR

我正在expo(react native)应用程序中创建可拖动视图。我正在使用来自react native的PanResponder API。一旦我开始拖动视图,它就会崩溃并显示此错误。我把代码放在try-catch块中,在控制台上得到了这个错误。

我正在关注这一点。我有与本教程完全相同的代码,但区别在于他使用的是类组件,而我使用的是函数组件


请帮我解决这个错误。

感谢您的帮助

只需在onPanResponderMove中为x指定一个值即可

在这里,你不需要沿着x平移。那就0吧

onPanResponderMove: (e, gestureState) => {
   position.setValue({ y: gestureState.dy, x: 0 });
},
import React, { useState } from "react";
import { My imports Here } from "react-native";
export default function App() {

  const position = useState(new Animated.ValueXY(0))[0];

  const [currentIndex, setCurrentIndex] = useState(0);

  const SCREEN_HIEGHT = Dimensions.get("window").height;
  const SCREEN_WIDTH = Dimensions.get("window").width;

  const ARTICLES = [
    {
      id: 1,
      uri: "https://placeimg.com/1000/1000/any",
    },
    {
      id: 2,
      uri: "https://placeimg.com/1000/1000/any",
    },
  ];

  const panResponder = useState(
    PanResponder.create({
      onStartShouldSetPanResponder: (e, gestureState) => true,
      onPanResponderMove: (e, gestureState) => {
        position.setValue({ y: gestureState.dy });
      },
      onPanResponderRelease: (e, gestureState) => {},
    })
  )[0];

  const RenderArticles = () => {
    return ARTICLES.map((item) => {
      return (
        <Animated.View
          key={item.id}
          {...panResponder.panHandlers}
          style={position.getLayout()}
        >
          <View
            style={{
              flex: 1,
              position: "absolute",
              height: SCREEN_HIEGHT,
              width: SCREEN_WIDTH,
              backgroundColor: "white",
            }}
          >
            <View style={{ flex: 2 }}>
              <Image
                source={{ uri: item.uri }}
                style={{
                  flex: 1,
                  height: null,
                  width: null,
                  resizeMode: "center",
                }}
              ></Image>
            </View>
            <View style={{ flex: 3, padding: 5 }}>
              <Text>
                Inventore autem recusandae est explicabo non cumque eum
                corporis. Rem qui est velit et quia accusantium perferendis
                odit. Vel velit aut iste quibusdam modi qui consequatur sit.
                Quas quae aperiam consectetur ut ut. Dignissimos et nisi sit.
                Eaque suscipit necessitatibus id odit.
              </Text>
            </View>
          </View>
        </Animated.View>
      );
    });
  };
  return <View style={{ flex: 1 }}>{RenderArticles()}</View>;
}
onPanResponderMove: (e, gestureState) => {
   position.setValue({ y: gestureState.dy, x: 0 });
},