react-native - Expo：来自 JS 的格式错误的调用：字段大小不同

问题描述

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

[17,"RCTView",{"top":0,"left":"<<NaN>>"}] is not usable as a native method argument

手机显示红屏Malformed calls from JS: field sizes are different和
[[134,10],[6,0],[["ExpoErrorRecovery",0,[null],252,253]],125]

这是我的代码

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>;
}

我正在youtube 上关注本教程。我有与本教程完全相同的代码，但不同之处在于他使用的是类组件，而我使用的是功能组件。

请帮我解决这个错误。
感谢你的帮助

标签： react-nativeanimationexpo

react-native - Expo：来自 JS 的格式错误的调用：字段大小不同

问题描述

解决方案

推荐阅读