Блог

Я все еще новичок в react Native. Когда я сохраняю свой собственный проект react, я вижу эту ошибку типа:

Я считаю, что это происходит, когда я сохраняю, и у него нет начального параметра для «this.card = card», но я еще не знаю, как установить его в функции

код:

 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_modulesreact-nativeLibrariesLogBoxLogBox.js:148:8 in registerError
at node_modulesreact-nativeLibrariesLogBoxLogBox.js:59:8 in errorImpl
at node_modulesreact-nativeLibrariesLogBoxLogBox.js:33:4 in console.error
at node_modulesexpobuildenvironmentreact-native-logs.fx.js:27:4 in error
at node_modulesreact-nativeLibrariesCoreExceptionsManager.js:104:6 in reportException
at node_modulesreact-nativeLibrariesCoreExceptionsManager.js:171:19 in handleException
at node_modulesreact-nativeLibrariesCoresetUpErrorHandling.js:24:6 in handleError
at node_modulesexpo-error-recoverybuildErrorRecovery.fx.js:12:21 in ErrorUtils.setGlobalHandler$argument_0
at node_modulesregenerator-runtimeruntime.js:63:36 in tryCatch
at node_modulesregenerator-runtimeruntime.js:294:29 in invoke
at node_modulesregenerator-runtimeruntime.js:63:36 in tryCatch
at node_modulesregenerator-runtimeruntime.js:155:27 in invoke
at node_modulesregenerator-runtimeruntime.js:165:18 in PromiseImpl.resolve.then$argument_0
at node_modulesreact-nativenode_modulespromisesetimmediatecore.js:37:13 in tryCallOne
at node_modulesreact-nativenode_modulespromisesetimmediatecore.js:123:24 in setImmediate$argument_0
at node_modulesreact-nativeLibrariesCoreTimersJSTimers.js:130:14 in _callTimer
at node_modulesreact-nativeLibrariesCoreTimersJSTimers.js:181:14 in _callImmediatesPass
at node_modulesreact-nativeLibrariesCoreTimersJSTimers.js:441:30 in callImmediates
at node_modulesreact-nativeLibrariesBatchedBridgeMessageQueue.js:387:6 in __callImmediates
at node_modulesreact-nativeLibrariesBatchedBridgeMessageQueue.js:135:6 in __guard$argument_0
at node_modulesreact-nativeLibrariesBatchedBridgeMessageQueue.js:364:10 in __guard
at node_modulesreact-nativeLibrariesBatchedBridgeMessageQueue.js:134:4 in flushedQueue
at [native code]:null in flushedQueue
at [native code]:null in invokeCallbackAndReturnFlushedQueue
 

Проблема в том, что вы пытаетесь получить доступ 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>