反应原生导航：找不到变量：导航

Question

我试图在应用程序头中创建一个可以访问帐户设置的参数，但当我建议使用navigation.anavigation('account'(｝时，我会得到找不到变量：navigation错误。我尝试了UseNavigation，但在那里他发现了钩子的错误使用，我不知道如何正确地使用它，因此我没有成功通过它

以下是代码来源：

1. 标题
2. 在我的例子中，他是一个导航器

Header.js:

import { StyleSheet, Button, View, Text, Image, TouchableOpacity, Alert } from 'react-native';
import { useNavigation } from '@react-navigation/native'
export class Header extends Component {
render(){
return(
<View style={StyleInfo.container}>
<Text style={StyleInfo.TextStyle}> Store </Text>
<TouchableOpacity style={StyleInfo.ButtonStyle2} activeOpacity={0.5}>
<Image
source={require('./Icons/Notification.png')}
style={StyleInfo.buttonNotification}
/>
</TouchableOpacity>
<TouchableOpacity 
style={StyleInfo.ButtonStyle} 
activeOpacity={0.5} 
onPress={() => navigation.navigate('Account')}
>
<Image
source={require('./Icons/IconACC.png')}
style={StyleInfo.buttonAcc}
/>
</TouchableOpacity>
</View>
);
}
}
const MenuStyle = StyleSheet.create({

menuContent: {
color: "#000",
fontWeight: "bold",
fontSize: 10,
}
});

App.js:

import { View, Button, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Login from './src/screens/Login';
import HomeScreen from './src/screens/HomeScreen';
import Product from './src/screens/Product';
import Buy from './src/screens/Buy';
import Map from './src/screens/Map';
import Category from './src/screens/Category';
import StoreA from './src/screens/StoreA';
import Account from './src/screens/Account';
const Stack = createNativeStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Login" component={Login} options={{ headerShown: false }} />
<Stack.Screen options={{ headerShown: false }} name="HomeScreen" component={HomeScreen} />
<Stack.Screen name="Account" component={Account} options={{ title: 'Настройки аккаунта' }}/>,
})} />
<Stack.Screen name="Product" component={Product} options={{ title: 'Product' }}/>
<Stack.Screen name="Buy" component={Buy} options={{ title: 'Buy' }} />
<Stack.Screen name="Map" component={Map} options={{ title: 'Map' }} />
<Stack.Screen name="StoreA" component={StoreA} options={{ title: 'StoreA' }} />
<Stack.Screen name="Category" component={Category} options={{ title: 'Category' }} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;

Answer 1

您可能忘记了const navigation = useNavigation();

useNavigation是一个钩子，最好在函数组件中使用它。

Answer 2

不要使用onPress={() => navigation.navigate('Account')}，而是尝试将其与关键字"这个"；。

onPress={() => this.navigation.navigate('Account')}

Answer 3

onPress={() => this.props.navigation.navigate('Account')}