undefined не является объектом (оценивающим this.props.navigation.navigate), реагирует на нативную - я не могу понять, почему возникает ошибка - PullRequest
Новая
       7

undefined не является объектом (оценивающим this.props.navigation.navigate), реагирует на нативную - я не могу понять, почему возникает ошибка

0 голосов
/ 30 сентября 2019

Я пытаюсь создать свое первое приложение для React Native для Android и получаю эту ошибку:

undefined не является объектом (оценивается как this.props.navigation.navigate)

Не могу понять, почему возникает ошибка.

Это код:

App.js 

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

class App extends React.Component {

  render() {
    return (
      <View style={styles.container}>
         <Image
        source={require('./img/imagem/logo.png')}
        style={styles.logo}
        />
          <TextInput
        style={styles.input}
          placeholder="Digite seu Email"
        />
         <TextInput
        style={styles.input}
        secureTextEntry={true}
          placeholder="Digite sua Senha"
        />

        <TouchableOpacity 
        style={styles.botao} 
        onPress={ () => {this.props.navigation.navigate('Home')}}
        >
        <Text style={styles.botaoText}>Login</Text>
         </TouchableOpacity>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#2c3e50'
  },
  logo:{
    width: 150,
    height: 150,
    borderRadius: 100
  },
  input:{
   marginTop: 10,
   padding: 10,
   width: 300,
   backgroundColor:'#fff',
   fontSize: 16,
   fontWeight: 'bold',
   borderRadius: 3
  },
  botao:{
    width: 300,
    height: 42,
    backgroundColor: '#3498db',
    marginTop: 10,
    borderRadius: 4,
    alignItems: 'center',
    justifyContent: 'center'
  },
  botaoText:{
    fontSize: 16,
    fontWeight: 'bold',
    color: '#fff'
  }
});

export default App;

home.js 

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

export default class Home extends Component{
    render(){
      return(
        <View style={styles.container}>
          <Text>Bem Vindo</Text>
        </View>
      );
    }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#2c3e50'
  }
})

index.js 

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

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

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

export default createAppContainer(AppNavigator);

Я сделал область панели заголовков и использовал эту <TouchableHighlight onPress={() => this.props.navigation.navigate('Home')}>, чтобы открыть меню Drawer в mainScreen, и использовал это также для страницы с фотографиями, меню в порядкев mainScreen Но когда я нажимаю <TouchableHighlight onPress={() => this.props.navigation.navigate('Home')}>

...