I'm trying to make a parameter in the application header with access to the account settings, but when I recommend using navigation.navigate('Account')}, I get the Can't find variable: navigation error. I tried UseNavigation, but there he found the wrong use of hooks, and I did not understand how to do it correctly, and therefore I did not succeed through it.

Here are the code sources:

1. Header
2. App.js - he is in my case a navigator.

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;

CodePudding user response：

You might forgot const navigation = useNavigation();

And useNavigation is a hook, it will be better to use it in a function component.

CodePudding user response：

Instead of using onPress={() => navigation.navigate('Account')} try to use it with the keyword "this".

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