我试图在一个按钮上制作一个简单的动画，只是为了看看它是否工作，为此我使用了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改成普通的Button，我试着让它变成普通的Button。我试着删除spring并重新安装它。我尝试删除"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"
此错误表示渲染方法中存在未定义的内容。有时它是您自己的组件，您忘记了导出。有时它是从错误的位置导入的第三方组件。我认为在你的情况下是后者。我会更改Spring组件的导入。试试这个：
import {Spring, animated} from 'react-spring/renderprops'