React Native - Chamar uma função dentro de uma classe "extends Component"

Front-end JavaScript
#1

Olá pessoal sou novo em React Native estou com dificuldades aqui.
Estou tentando chamar uma função dentro de uma classe mas tá dando erro.

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons
:

  1. You might have mismatching versions of React and the renderer (such as React DOM)
  2. You might be breaking the Rules of Hooks
  3. You might have more than one copy of React in the same app
    See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

Esse é a função

   adicionar() {
     const navigation = useNavigation();
     navigation.navigate('Adicionar');
   }

Quero chamar no evento onPress do TouchableOpacity

<TouchableOpacity style={styles.detailsButton} onPress={adicionar}>
   <AntDesign name="pluscircle" size={41} color="#333333" />
</TouchableOpacity>

Segue todo o código:

import React, { Component } from 'react';

import { AntDesign } from '@expo/vector-icons';

import { StyleSheet, View, ScrollView, Image, Text, TouchableOpacity} from 'react-native';

import { Table, TableWrapper, Row } from 'react-native-table-component';

import logoImg from '../../assets/logo.png';

import styles from './styles';

import { useNavigation } from '@react-navigation/native';

import Adicionar from '../Adicionar';

export default class Gastos extends Component {    

  constructor(props) {    

    super(props);

    this.state = {

      tableHead: ['Descrição', 'Valor', 'Ações'],

      widthArr: [250, 80, 80]

    }

  }

    adicionar() {

        const navigation = useNavigation();

        navigation.navigate('Adicionar');

    }

  render() {

    const state = this.state;

    const data = [];

    for (let i = 0; i < 10; i += 1) {

      const dataRow = [];

      for (let j = 0; j < 3; j += 1) {

        dataRow.push(`${i}${j}`);

      }

      data.push(dataRow);

    }  

                

    return (

        <View style={styles.container}>

            <View style={styles.header}>

                <Image source={logoImg} />

            </View>

            <View style={styles.barraAdicionar}>

                <Text style={styles.titulo}>GASTOS</Text>

                <TouchableOpacity style={styles.detailsButton} onPress={adiconar}>

                    <AntDesign name="pluscircle" size={41} color="#333333" />

                </TouchableOpacity>

            </View>

            <View style={styles.barraAdicionar}>

                <TouchableOpacity style={styles.detailsButton} onPress={() => {}}>

                    <AntDesign name="left" size={24} color="#333333" />

                </TouchableOpacity>

                <Text style={styles.titulo}>Janeiro</Text>

                <TouchableOpacity style={styles.detailsButton} onPress={() => {}}>

                    <AntDesign name="right" size={24} color="#333333" />

                </TouchableOpacity>

            </View>

      

            <ScrollView horizontal={true}>

                <View>

                    <Table borderStyle={{borderColor: '#C1C0B9'}}>

                    <Row data={state.tableHead} widthArr={state.widthArr} style={styles.head} textStyle={styles.text}/>

                    </Table>

                    <ScrollView style={styles.dataWrapper}>

                    <Table borderStyle={{borderColor: '#C1C0B9'}}>

                        {

                        data.map((dataRow, index) => (

                            <Row

                            key={index}

                            data={dataRow}

                            widthArr={state.widthArr}

                            style={[styles.row, index%2 && {backgroundColor: '#ffffff'}]}

                            textStyle={styles.text}

                            />

                        ))

                        }

                    </Table>

                    </ScrollView>

                </View>

            </ScrollView>

      </View>

    )

  }

}

Alguém pode me ajudar? Desde já agradeço.

#2

voce tem que vincular o contexto da funcao no construtor.

 constructor(props) {    
    super(props);
    this.adicionar = this.adicionar.bind(this);
}
adicionar() {
     const navigation = useNavigation();
     navigation.navigate('Adicionar');
}

<TouchableOpacity style={styles.detailsButton} onPress={this.adicionar}>
   <AntDesign name="pluscircle" size={41} color="#333333" />
</TouchableOpacity>

se nao quiser fazer assim, pode usar arrow funcion

adicionar = () => {
    console.log('adicionando...')
}
#3

Oi thimor obrigado pela resposta, fiz o que você sugeriu porém continua o erro

erro1%20react%20native
erro1 react native.jpeg540×1080 96.2 KB

Fiz o teste com

adicionar = () => {
    console.log('adicionando...')
}

E funcionou.

Estou tentando fazer a navegação de telas eu estou o seguinte código para fazer a navegação de rotas.

import React from 'react';

import { NavigationContainer} from '@react-navigation/native'

import { createStackNavigator} from '@react-navigation/stack'

const AppStack = createStackNavigator();

import Gastos from './pages/Gastos';

import Adicionar from './pages/Adicionar';

import Tabela from './pages/Testes'

 export default function Routes(){

     return(

          <NavigationContainer>

              <AppStack.Navigator screenOptions={ {headerShown: false} }>

                  

                  <AppStack.Screen name="Gastos" component={Gastos} />

                  <AppStack.Screen name="Adicionar" component={Adicionar} />

                  <AppStack.Screen name="Tabela" component={Tabela} />

              </AppStack.Navigator>

          </NavigationContainer>

     );

 }
#4

voce nao pode chamar um hook, fora da funcao.

//esta fora
const AppStack = createStackNavigator();

export default function Routes(){
    //tem que ser dentro.
    const AppStack = createStackNavigator();
}