Javascript Meu código react native está dando erro

[arthurbavi]

Olá pessoal, preciso de ajuda. Estou fazendo um simples app com react native. Possui uma tela de login e eu gostaria que ao clicar no botão login, o usuário seja redirecionado para uma tela home. Porém ao clicar em login está dando o seguinte erro abaixo:

 

 

Aqui o trecho do código que eu acho que pode ser o problema:

<TouchableOpacity
  style={styles.botao}
  onPress={ () => { this.props.navigation.navigate('Home') } }
>
  <Text style={styles.botaoText}>Login</Text>
</TouchableOpacity>

 

Abaixo o código do index:

import React, { Component } from 'react'
import { createAppContainer, createStackNavigator } from 'react-navigation';

import App from './App';
import Home from './home';

const MainNav = createStackNavigator (
{
  App: {
      screen: App,
      navigationOptions: {
          header: null
      }
  },
  Home: {
    screen: Home,
    navigationOptions: {
        headerTitle: 'Home'
    }
  }
}
)

export default createAppContainer(MainNav);

 

Não sei o que fazer, agradeço muito a quem puder ajudar.

Caso necessite o código completo me avisem.

[felipecchaves]

Acontece que o seu "this.props.navigation.navigate('Home')" é indefinido. Como você tá passando essa propriedade pro componente?

[arthurbavi]

@felipecchaves Então no caso eu tenho que criar uma pasta components? Sou iniciante e não tenho muito conhecimento de react native. Se puder me orientar o que devo fazer agradeço muito 

[felipecchaves]

Em 16/11/2022 às 13:18, arthurbavi disse:

<TouchableOpacity
  style={styles.botao}
  onPress={ () => { this.props.navigation.navigate('Home') } }
>
  <Text style={styles.botaoText}>Login</Text>
</TouchableOpacity>

 

Mostra todo esse código.

 

Esse "this.props" significa que você recebe uma propriedade "navigation" através das propriedades desse componente que tá renderizando o botão. No caso desse erro que tá aparecendo é porque não tá recebendo essa propriedade.

[arthurbavi]

@felipecchaves

import React, { Component } from 'react'
import { Alert, Text, StyleSheet, View, Image, TextInput, TouchableOpacity } from 'react-native'

export default class App extends Component {
  
    clicou = () => {
      Alert.alert("Trabalho", "Login efetuado!");
    }

    state = {
      nome: ''
    }

    render() {
        return (
            <View style={styles.container}>
            
                <Image
                    source={require('./assets/logo.png')}
                    style={styles.logo}
                    />

                <TextInput 
                  style={styles.input}
                  onChangeText={ text => this.state.nome = text }
                  placeholder="Digite seu email:"
                />

                <TextInput
                  style={styles.input}
                  secureTextEntry={true}
                  placeholder="Digite sua senha:"
                />

                <TouchableOpacity
                  style={styles.botao}
                  onPress={ () => { this.props.navigation.navigate('Home', {'nome': this.state.nome}) } }
                >
                  <Text style={styles.botaoText}>Login</Text>
                </TouchableOpacity>

            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex:1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#2c7a87'
    },
    logo: {
        width: 150,
        height: 150,
        borderRadius: 100
    },
    input: {
      marginTop: 10,
      padding: 10,
      width: 300,
      backgroundColor: '#fff',
      fontSize: 13,
      fontWeight: 'bold',
      borderRadius: 3
    },
    botao:{
      width: 300,
      height: 42,
      backgroundColor: '#3121db',
      marginTop: 10,
      borderRadius: 4,
      alignItems: 'center',
      justifyContent: 'center',
    },
    botaoText:{
      fontSize: 16,
      fontWeight: 'bold',
      color: '#fff'
    }
})

 

[felipecchaves]

@arthurbavi não é o que eu pensei. Não manjo nada de React Native, mas fiz uma pesquisa, testei aqui e funcionou. O "App.js" é o entry point da aplicação, então o "createStackNavigator" e o "createAppContainer" precisam ficar nele. Vai ficar assim:

 

// App.js

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

import Login from './Login';
import Home from './Home';

const AppNavigator = createStackNavigator({
  Login: {
    screen: Login,
    navigationOptions: {
      header: null
    }
  },
  Home: {
    screen: Home,
    navigationOptions: {
      headerTitle: 'Home'
    }
  }
});

export default createAppContainer(AppNavigator);

 

// Login.js

import React, { Component } from 'react';
import { View, Text, TextInput, TouchableOpacity, StyleSheet } from 'react-native';

export default class Login extends Component {
  state = {
    nome: ''
  }

  render() {
    return (
      <View style={styles.container}>

        <TextInput
          style={styles.input}
          onChangeText={text => this.state.nome = text}
          placeholder="Digite seu email"
        />

        <TouchableOpacity
          style={styles.botao}
          onPress={() => { this.props.navigation.navigate('Home', { 'nome': this.state.nome }) }}
        >
          <Text style={styles.botaoText}>Entrar</Text>
        </TouchableOpacity>

      </View>
    )
  }
}

 

// Home.js

import React, { Component } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';

export default class Home extends Component {
  render() {
    const { navigation } = this.props;

    return (
      <View style={styles.container}>

        <Text style={styles.texto}>
          Nome: {JSON.stringify(navigation.getParam('nome', 'NO-ID'))}
        </Text>

        <TouchableOpacity
          style={styles.botao}
          onPress={() => { this.props.navigation.navigate('Login') }}
        >
          <Text style={styles.botaoText}>Voltar</Text>
        </TouchableOpacity>

      </View>
    );
  }
}