How to resolve this Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component

huangapple go评论59阅读模式
英文:

How to resolve this Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component

问题

我觉得我错过了一些东西。

我想要导航到另一个屏幕。我得到了这个错误:

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component

经过检查,我不确定问题是什么。

我的代码如下:

import {
  Text,
  View,
  TextInput,
  ImageBackground,
  StyleSheet,
  Dimensions,
  TouchableOpacity,
  Image,
} from 'react-native';
import React from 'react';
import image from '../../assets/images/1.png';
import btnimage from '../../assets/images/button1.png';
import {useNavigation} from '@react-navigation/native';

const screenHeight = Dimensions.get('window').height;
const screenWidth = Dimensions.get('window').width;

const navigation = useNavigation();

const NavigateNextPage = () => {
  navigation.navigate('WalkThruPage2');
};

const PlayVideo = () => {
  return (
    <View>
      <ImageBackground source={image} resizeMode="stretch" style={styles.img} />
      <TouchableOpacity onPress={() => { NavigateNextPage();}}
        style={{position: 'absolute', bottom: 20, right: 30, zIndex: 1}}>
        <Image style={{height: 60, width: 60}} source={btnimage} />
      </TouchableOpacity>
    </View>
  );
};

export default PlayVideo;

const styles = StyleSheet.create({
  img: {
    height: screenHeight,
    width: screenWidth,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

我做错了什么?我希望一旦他们点击了 TouchableOpacity,它就会加载到下一页。但是在加载时,我得到了那个错误。我该如何解决这个问题?

英文:

I think i miss something.

I want to navigate to another screen. I am getting this As error

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component

Checking Thru, I am not sure as to what the challenge is

My code Looks thus :

import {
  Text,
  View,
  TextInput,
  ImageBackground,
  StyleSheet,
  Dimensions,
  TouchableOpacity,
  Image,
} from &#39;react-native&#39;;
import React from &#39;react&#39;;
import image from &#39;../../assets/images/1.png&#39;;
import btnimage from &#39;../../assets/images/button1.png&#39;;
import {useNavigation} from &#39;@react-navigation/native&#39;;

const screenHeight = Dimensions.get(&#39;window&#39;).height;
const screenWidth = Dimensions.get(&#39;window&#39;).width;

const navigation = useNavigation();

const NavigateNextPage = () =&gt; {
  navigation.navigate(&#39;WalkThruPage2&#39;);
};

const PlayVideo = () =&gt; {
  return (
    &lt;View&gt;
      &lt;ImageBackground source={image} resizeMode=&quot;stretch&quot; style={styles.img} /&gt;
      &lt;TouchableOpacity onPress={() =&gt; { NavigateNextPage();}}
        style={{position: &#39;absolute&#39;, bottom: 20, right: 30, zIndex: 1}}&gt;
        &lt;Image style={{height: 60, width: 60}} source={btnimage} /&gt;
      &lt;/TouchableOpacity&gt;
    &lt;/View&gt;
  );
};

export default PlayVideo;

const styles = StyleSheet.create({
  img: {
    height: screenHeight,
    width: screenWidth,
    justifyContent: &#39;center&#39;,
    alignItems: &#39;center&#39;,
  },
});

What Am i getting wrong? I want it to be that, once they click the Touchable Opacity it loads to next page. But on Loading I get that Error. How Do i resolve this?

答案1

得分: 1

错误提示表明钩子函数不能在函数外部调用,因此请按照以下方式修改您的代码:

import React from 'react';
import { View, ImageBackground, TouchableOpacity, Image, Dimensions } from 'react-native';
import { useNavigation } from '@react-navigation/native';

const PlayVideo = () => {
  const screenHeight = Dimensions.get('window').height;
  const screenWidth = Dimensions.get('window').width;

  const navigation = useNavigation();

  const NavigateNextPage = () => {
    navigation.navigate('WalkThruPage2');
  };

  return (
    <View>
      <ImageBackground source={image} resizeMode="stretch" style={styles.img} />
      <TouchableOpacity onPress={() => { NavigateNextPage(); }} style={{ position: 'absolute', bottom: 20, right: 30, zIndex: 1 }}>
        <Image style={{ height: 60, width: 60 }} source={btnimage} />
      </TouchableOpacity>
    </View>
  );
};

请注意,上述代码中的imagebtnimage变量需要根据您的实际情况进行定义和引入。

英文:

As error suggests hooks can't be called outside of function so modify your code as below:

const PlayVideo = () =&gt; {

const screenHeight = Dimensions.get(&#39;window&#39;).height;
const screenWidth = Dimensions.get(&#39;window&#39;).width;

const navigation = useNavigation();

const NavigateNextPage = () =&gt; {
  navigation.navigate(&#39;WalkThruPage2&#39;);
};


 return (
    &lt;View&gt;
      &lt;ImageBackground source={image} resizeMode=&quot;stretch&quot; style={styles.img} /&gt;
         &lt;TouchableOpacity onPress={() =&gt; { NavigateNextPage();}}
          style={{position: &#39;absolute&#39;, bottom: 20, right: 30, zIndex: 1}}&gt;
           &lt;Image style={{height: 60, width: 60}} source={btnimage} /&gt;
         &lt;/TouchableOpacity&gt;
    &lt;/View&gt;
 );
};

huangapple
  • 本文由 发表于 2023年8月9日 16:15:57
  • 转载请务必保留本文链接:https://go.coder-hub.com/76865814.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定