TypeError:undefined 不是对象(评估'_this.props.card = card')- React Native 与 EXPO
2021-08-04
1120
我对 React Native 还只是个新手。当我保存我的 React Native 项目时,我看到此 TypeError 此错误:
我相信当我保存时会发生这种情况,并且它没有“this.card = card”的初始参数,但我不知道如何在函数中设置它
CODE:
import React from "react";
import {
TouchableOpacity,
StyleSheet,
View,
Button,
Image
} from "react-native";
import LottieView from "lottie-react-native";
import Front from "./assets/Front.jpg";
import Back from "./assets/Back.jpg";
import CardFlip from "react-native-card-flip";
export default function Carteirinha({ navigation }) {
const animation = React.useRef(null);
const [speed, setSpeed] = React.useState(0);
return (
<View style={styles.container}>
<CardFlip style={styles.cardContainer} ref={(card) => (this.card = card)}>
<TouchableOpacity style={styles.card} onPress={() => this.card.flip()}>
<Image source={Front} style={styles.cardContainer}></Image>
</TouchableOpacity>
<TouchableOpacity style={styles.card} onPress={() => this.card.flip()}>
<Image source={Back} style={styles.cardContainer}></Image>
</TouchableOpacity>
</CardFlip>
<LottieView
ref={animation}
style={{
width: 420,
height: 200,
//backgroundColor: '#000',
}}
//source={require('./assets/Lottie/34654-hand-arrows.json')}
source={require('./assets/Lottie/53969-click.json')}
speed={1}
autoPlay
loop={true}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#F5FCFF"
},
cardContainer: {
width: 320,
height: 509
},
card: {
width: 320,
height: 509,
backgroundColor: "#FE474C",
borderRadius: 5,
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5
},
card1: {
backgroundColor: "#FE474C"
},
card2: {
backgroundColor: "#FEB12C"
},
label: {
lineHeight: 509,
textAlign: "center",
fontSize: 55,
fontFamily: "System",
color: "#ffffff",
backgroundColor: "transparent"
}
});
我正在为 React Native 使用此卡片翻转动画: https://github.com/lhandel/react-native-card-flip
控制台 日志
TypeError: undefined is not an object (evaluating '_this.props.card = card')
This error is located at:
in CardFlip (at Carteirinha/index.js:35)
in RCTView (at View.js:34)
in View (at Carteirinha/index.js:33)
in Carteirinha (at SceneView.tsx:122)
in StaticContainer
in StaticContainer (at SceneView.tsx:115)
in EnsureSingleNavigator (at SceneView.tsx:114)
in SceneView (at useDescriptors.tsx:153)
in RCTView (at View.js:34)
in View (at CardContainer.tsx:245)
in RCTView (at View.js:34)
in View (at CardContainer.tsx:244)
in RCTView (at View.js:34)
in View (at CardSheet.tsx:33)
in ForwardRef(CardSheet) (at Card.tsx:573)
in RCTView (at View.js:34)
in View (at createAnimatedComponent.js:165)
in AnimatedComponent (at createAnimatedComponent.js:215)
in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:555)
in PanGestureHandler (at GestureHandlerNative.tsx:13)
in PanGestureHandler (at Card.tsx:549)
in RCTView (at View.js:34)
in View (at createAnimatedComponent.js:165)
in AnimatedComponent (at createAnimatedComponent.js:215)
in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:544)
in RCTView (at View.js:34)
in View (at Card.tsx:538)
in Card (at CardContainer.tsx:206)
in CardContainer (at CardStack.tsx:623)
in RNSScreen (at createAnimatedComponent.js:165)
in AnimatedComponent (at createAnimatedComponent.js:215)
in ForwardRef(AnimatedComponentWrapper) (at src/index.native.tsx:147)
in Screen (at Screens.tsx:74)
in MaybeScreen (at CardStack.tsx:616)
in RNSScreenContainer (at src/index.native.tsx:186)
in ScreenContainer (at Screens.tsx:50)
in MaybeScreenContainer (at CardStack.tsx:498)
in CardStack (at StackView.tsx:462)
in KeyboardManager (at StackView.tsx:458)
in RNCSafeAreaProvider (at SafeAreaContext.tsx:76)
in SafeAreaProvider (at SafeAreaProviderCompat.tsx:42)
in SafeAreaProviderCompat (at StackView.tsx:455)
in RCTView (at View.js:34)
in View (at StackView.tsx:454)
in StackView (at createStackNavigator.tsx:87)
in StackNavigator (at App.js:20)
in EnsureSingleNavigator (at BaseNavigationContainer.tsx:409)
in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:91)
in ThemeProvider (at NavigationContainer.tsx:90)
in ForwardRef(NavigationContainer) (at App.js:19)
in App (created by ExpoRoot)
in ExpoRoot (at renderApplication.js:45)
in RCTView (at View.js:34)
in View (at AppContainer.js:106)
in DevAppContainer (at AppContainer.js:121)
in RCTView (at View.js:34)
in View (at AppContainer.js:132)
in AppContainer (at renderApplication.js:39)
at node_modules\react-native\Libraries\LogBox\LogBox.js:148:8 in registerError
at node_modules\react-native\Libraries\LogBox\LogBox.js:59:8 in errorImpl
at node_modules\react-native\Libraries\LogBox\LogBox.js:33:4 in console.error
at node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:104:6 in reportException
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:171:19 in handleException
at node_modules\react-native\Libraries\Core\setUpErrorHandling.js:24:6 in handleError
at node_modules\expo-error-recovery\build\ErrorRecovery.fx.js:12:21 in ErrorUtils.setGlobalHandler$argument_0
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:294:29 in invoke
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:155:27 in invoke
at node_modules\regenerator-runtime\runtime.js:165:18 in PromiseImpl.resolve.then$argument_0
at node_modules\react-native\node_modules\promise\setimmediate\core.js:37:13 in tryCallOne
at node_modules\react-native\node_modules\promise\setimmediate\core.js:123:24 in setImmediate$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:130:14 in _callTimer
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:181:14 in _callImmediatesPass
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:441:30 in callImmediates
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:387:6 in __callImmediates
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:135:6 in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:134:4 in flushedQueue
at [native code]:null in flushedQueue
at [native code]:null in invokeCallbackAndReturnFlushedQueue
1个回答
问题是您尝试在功能组件(箭头函数)中访问
this
。这是不允许的。
您提到他们在
他们的示例
中使用了
this
,但他们的示例缺少很多上下文。他们的示例代码可能来自只有类组件(其中
this
有效使用)的时代。
对于您的情况,请查看
useRef
的文档以及它引用的其他页面。您可以像这样使用它:
const cardFlip = useRef();
return (
<View style={styles.container}>
<CardFlip style={styles.cardContainer} ref={cardFlip}>
<TouchableOpacity style={styles.card} onPress={() => cardFlip.current.flip()}>
<Image source={Front} style={styles.cardContainer}></Image>
</TouchableOpacity>
<TouchableOpacity style={styles.card} onPress={() => cardFlip.current.flip()}>
<Image source={Back} style={styles.cardContainer}></Image>
</TouchableOpacity>
</CardFlip>
Kelvin Schoofs
2021-08-04