英文:
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 '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',
},
});
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>
);
};
请注意,上述代码中的image
和btnimage
变量需要根据您的实际情况进行定义和引入。
英文:
As error suggests hooks can't be called outside of function so modify your code as below:
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>
);
};
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论