React Native 与 React spring Launch 'Invariant Violation'答案

【问题标题】：React Native with React spring Launch 'Invariant Violation'React Native 与 React spring Launch 'Invariant Violation'
【发布时间】：2020-11-20 14:05:12
【问题描述】：

我试图在按钮上制作一个简单的动画只是为了看看它是否工作，为此我使用了 react-spring 1，但出现了问题。

这就是我正在做的创建动画：

import React from "react";
import { animated, Spring } from "react-spring/native";
import { Button } from "react-native";

const AnimatedButton = animated(Button);

class ThermoComponent extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
    const targetPerc = (this.targetTemp - this.minTemp) / this.tempRange();
    const sliderYDelta = targetPerc * this.sliderYRange();
    const sliderTargetY = this.yAtMinTemp() - sliderYDelta;
    const newHeight = this.sliderYRange() + sliderYDelta;

    return (
      <Spring native from={{ w: 0, h: 0 }} to={{ w: 300, h: 600 }}>
        {(props) => (
          <AnimatedButton width={props.w} height={props.h} title="hello">
            {" "}
          </AnimatedButton>
        )}
      </Spring>
    );
  }

这是我从控制台获得的完整日志：

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `ThermoComponent`.

Stack trace:
  node_modules/prop-types/factoryWithThrowingShims.js:36:23 in module.exports
  node_modules/prop-types/factoryWithThrowingShims.js:36:23 in module.exports
  node_modules/prop-types/factoryWithThrowingShims.js:61:2 in module.exports
  node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:12531:2 in updateForwardRef
  node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:12626:22 in updateMemoComponent
  node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:15706:15 in cutOffTailIfNeeded
  node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:16087:7 in completeWork
  http://192.168.1.146:19001/node_modules/expo/AppEntry.bundle?platform=android&dev=true&minify=false&hot=false:152687:50 in updateClassComponent
  http://192.168.1.146:19001/node_modules/expo/AppEntry.bundle?platform=android&dev=true&minify=false&hot=false:143964:21 in invokeGuardedCallbackImpl
  http://192.168.1.146:19001/node_modules/expo/AppEntry.bundle?platform=android&dev=true&minify=false&hot=false:144060:42 in invokeGuardedCallback
  node_modules/react-native/Libraries/Utilities/MatrixMath.js:135:23 in reuseRotateXCommand
  http://192.168.1.146:19001/node_modules/expo/AppEntry.bundle?platform=android&dev=true&minify=false&hot=false:157319:30 in performUnitOfWork
  node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:22052:33 in overrideHookState
  node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:21729:17 in createFiberRoot
  [native code]:null in renderRoot
  http://192.168.1.146:19001/node_modules/expo/AppEntry.bundle?platform=android&dev=true&minify=false&hot=false:156826:34 in runRootCallback
  [native code]:null in runRootCallback
  node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:8660:2 in resumeMountClassInstance
  node_modules/react-devtools-core/build/backend.js:1:5299 in <anonymous>
  node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:8653:19 in resumeMountClassInstance
  node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:8639:5 in resumeMountClassInstance
  node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:21498:18 in <anonymous>
  node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5428:7 in <anonymous>
  node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5518:15 in <anonymous>
  node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5559:4 in getCurrentPriorityLevel
  node_modules/react-spring/native.js:1267:87 in Promise$argument_0
  node_modules/react-spring/native.js:1007:22 in AnimatedValue#constructor
  node_modules/react-spring/native.js:1222:9 in Controller#stop
  http://192.168.1.146:19001/node_modules/expo/AppEntry.bundle?platform=android&dev=true&minify=false&hot=false:166117:21 in callFunctionReturnFlushedQueue
  [native code]:null in callFunctionReturnFlushedQueue
  ...

我尝试将 AnimatedButton 更改为普通按钮，我试图让它成为唯一的，我尝试移除弹簧并重新安装它。我尝试删除“native”关键字。

这些是我的依赖项（已安装）：

"expo": "~36.0.0",
    "react": "~16.9.0",
    "react-dom": "~16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
    "react-native-gesture-handler": "~1.5.0",
    "react-native-reanimated": "~1.4.0",
    "react-native-safe-area-context": "0.6.0",
    "react-native-screens": "2.0.0-alpha.12",
    "react-native-svg": "^9.13.3",
    "react-navigation": "^4.1.0",
    "react-navigation-stack": "^2.0.16",
    "react-spring": "^8.0.27"

【问题讨论】：

我在 EOF 处“导出默认 ThermoComponent”

标签： reactjs react-native animation react-spring

【解决方案1】：

此错误表示您的渲染方法中有一些未定义的内容。有时它是您自己的组件，您忘记导出。有时它是您从错误位置导入的第三方组件。我认为在你的情况下是后者。我会更改 Spring 组件的导入。试试这个：

  import {Spring, animated} from 'react-spring/renderprops'

【讨论】：