Executando verificação de segurança...
1
joaopereira012
1 min de leitura ·

Problemas com React-Navigation no arquivo tsx

Tô fazendo um projeto que envolve navegação de telas em react native mas ao tentar usar a proprieda onPress no componente TouchableOpacity por algum motivo não reconhece o componente
Boasvindas2 já verifiquei o arquivo que contém as rotas para navegação e não consegui encontrar o erro no código. O código do arquivo está abaixo quem puder me ajudar agradeço.

import { Text, View, Image, StyleSheet, TouchableOpacity } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import React from 'react';

export default function Boasvindas() {
  const navigation = useNavigation();
    return (
      <View style={styles.container}>
          
            <Text style={styles.title}>MONITORE A QUALIDADE DO AR</Text>
            <View>
                <Image 
                    source={require('../../../assets/iconeseimagens_app/imagem1.png')}
                    style={{width: '100%'}}
                    resizeMode="contain"
                />
            </View>
            <View>
                <Text style={styles.subtitle}>
                    TENHA ACESSO AOS DADOS DE NOSSOS SENSORES
                </Text>
            </View>
            <View style={styles.containerButton}>
                <TouchableOpacity 
                style={styles.button} 
                onPress={ () => navigation.navigate('Boasvindas2')}
                >
                    <View style={styles.buttonView}>
                        <Image 
                            source={require('../../../assets/iconeseimagens_app/seta.png')}
                            style={{width: 64, height: 64,}}
                            resizeMode='contain'
                        />
                        <Text style={styles.buttonText}>PRÓXIMO</Text>
                    </View>
                </TouchableOpacity>
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#00bf63',
        padding: 30,
    },
    containerButton: {
        flex: 1,
        backgroundColor: '#00bf63',
        alignItems: 'flex-end',
        justifyContent: 'flex-end',
        paddingBottom: 20,
        paddingRight: 20,
    },
    title: {
        textAlign: 'center',
        fontWeight: 'bold',
        fontSize: 32.5,
        color: '#fff',
        marginBottom: 6,
        margin: 3,
    },
    subtitle: {
        textAlign: 'center',
        fontWeight: 'bold',
        fontSize: 24.1,
        color: '#fff',
        margin: 4,
    },
    button: {
        position: 'absolute',
        flexDirection: 'column',
        alignItems: 'center',
    },
    buttonView: {
        alignItems: 'center',
    },
    buttonText: {
        fontWeight: 'bold',
        fontSize: 14.4,
        color: '#fff',
        marginTop: 5,
    }
});
Carregando publicação patrocinada...
1
GeleiaRei

Já tentou enviar o código pro chatgpt? Para problema simples/comum é mais rápido ir a ele. E que me lembre a documentação do react navigation é boa e contém exemplos, compare os exemplos de lá com seu código pra ver se fez algo errado

1
joaopereira012
Autor
Autor

Já enviei o código pro gpt ele falou que podia ser devido à alguma configuração de estilo ou algum problema de rota, mas não é porque o botão não está oculto e o arquivo que contém as rotas está semelhante ao exemplo da documentação da biblioteca.

2
GeleiaRei

Pode mandar o arquivo/componente de roteamento? Enquanto isso aqui está algumas perguntas que pode ajudar a encontrar o problema:

  • Tem ctz que é ele que está sendo chamado no Index para ser renderizado primeiro?

    • O componente com as rotas está sendo renderizado no App/index/root e os componentes das telas estão sendo renderizado através dela?
    • Tem ctz que existe uma Screen com um name="Boasvindas2" no router? Talvez você simplesmente colocou o nome da tela errado no navigate

  • Viu se apareceu um erro no console log depois de clicar no botão? Se está usando expo web o erro vai aparecer no console do devTools/f12 do navegador ao invés do vscode

  • O onPress está sendo disparado? Confirmou isso colocando um console log lá é clicando no botão para ver se aparecia a msg no console?

1
joaopereira012
Autor
Autor

Esse código abaixo é o código do arquivo com as screens

`import { createStackNavigator } from "@react-navigation/stack";

import Boasvindas from '../pages/boas-vindas';
import Boasvindas2 from '../pages/boas-vindas2';
import Boasvindas3 from '../pages/boas-vindas3';
import Login from "../pages/login";
import Cadastro from "../pages/cadastro";

const Stack = createStackNavigator();

export default function Routes (){
return(
<Stack.Navigator>
<Stack.Screen
name = "Boasvindas"
component={Boasvindas}
options={{headerShown: false}}
/>

  <Stack.Screen
    name = "Boasvindas2"
    component={Boasvindas2}
    options={{headerShown: false}}
  />
  
  <Stack.Screen
    name = "Boasvindas3"
    component={Boasvindas3}
    options={{headerShown: false}}
  />
  
  <Stack.Screen
    name = "Login"
    component={Login}
    options={{headerShown: false}}
  />
  
  <Stack.Screen
    name = "Cadastro"
    component={Cadastro}
    options={{headerShown: false}}
  />
</Stack.Navigator>

);
}`

Enquanto esse é o código da página que contém o navigation Container

`import React from "react";
import { StatusBar } from "react-native";

import { NavigationContainer } from "@react-navigation/native";
import Routes from "./src/routes";

export default function App(){
return(




)
}

`

1