React Native Expo错误:Hooks只能在函数组件的内部调用

Question

我正在使用React Native开发移动应用程序expo. .我得到以下异常:

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

我已经通过了其他的答案张贴在这里的SO，并确认我的代码中的钩子确实是在一个函数内。但是我仍然无法解决这个错误。请帮助。请参阅下面我的代码。如果需要进一步说明，请告诉我。

import React, { useState, useEffect } from 'react';
import { SafeAreaView, StatusBar, Button, View, Platform , Text} from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import Constants from 'expo-constants';
const statusBarPadding = Platform.OS === 'android' ? StatusBar.currentHeight: 0;
export default function OpenGallery () {
const [image, setImage] = useState(null);
useEffect(() => {      // hook is inside function but still getting error
(async () => {
if (Platform.OS !== 'web') {
const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
if (status !== 'granted') {
alert('Sorry, we need camera roll permissions to make this work!');
}
}
})();
}, []);
return (
<SafeAreaView style={{ paddingTop: statusBarPadding }}> 
<Text> Some text </Text>
</SafeAreaView>
);
}

第二文件:

import React from 'react';
import { SafeAreaView, StatusBar, Button, View, Platform , Text} from 'react-native';
import OpenGallery from './OpenGallery'
const statusBarPadding = Platform.OS === 'android' ? StatusBar.currentHeight: 0;
export default function CameraScreen() {
return (
<SafeAreaView style={{ paddingTop: statusBarPadding }}>
<Text> Upload image from gallery.</Text>
<Button title="Select from Gallery" onPress={OpenGallery} />
</SafeAreaView>
);
}

Answer 1

它实际上不是从组件内部调用的。从JSX调用它，这是完全不同的。这里有两个问题违反了钩子的规则。

钩子必须无条件调用。你违反了这条规则。

<Button title="Select from Gallery" **onPress={OpenGallery}** />

钩子必须从功能组件内部调用。您不能导入另一个组件并将其作为函数调用。这就是你在做的。你在onPress方法上调用react组件，这是错误的。

你能做什么来修复它?把国家搞垮。在第二个文件中检查它是在网页上还是在移动设备上。我想把代码贴出来，但是我现在还没有安装expo。

Answer 2

这可能听起来超出了这里的范围，但我认为在你的情况下，你需要指定如何在按下CameraScreen按钮后显示OpenGallery的行为…你可以使用导航(可能是反应式导航)或使用模态。

假设你正在使用反应导航。(当您使用expo时，它通常包含在项目中)https://reactnavigation.org/

在CameraScreen

export default function CameraScreen({navigation}) {
const gotoOpenGallery = () => {
navigation.navigate('OpenGallery');
}
return (
<SafeAreaView style={{ paddingTop: statusBarPadding }}>
<Text> Upload image from gallery.</Text>
<Button title="Select from Gallery" onPress={gotoOpenGallery} />
</SafeAreaView>
);
}

你还需要创建一个StackNavigator

你的app .js(或者你的app入口点)

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import OpenGallery from './OpenGallery';
import CameraScreen from './CameraScreen';
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="CameraScreen" component={CameraScreen} />
<Stack.Screen name="OpenGallery" component={OpenGallery} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;