错误未定义不是对象(正在评估'_this.props.navigation')]]

问题描述 投票:0回答:1

Index.js

o createAppContainerestáaparecendo essa mensagem“'createAppContainer'édeclarado,mas seu valor nuncaélido。”。 E o“ import React,{Component} from'react'estácoms mesma mensaguem

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

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

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

export default createStackNavigator(MainNav);

Home.js

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

export default class Home extends Component{
    render(){
        return(
            <view style={styles.container}>
             <text> Bem vindo a sua Home Page</text>
            </view>
        )    
    }
}

const styles = StyleSheet.create({
    container:{
        flex:1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#2c3e50'
    }
})

登录

import { KeyboardAvoidingView, Text, StyleSheet, TextInput, TouchableOpacity, ImageBackground} from 'react-native';
import * as Animatable from "react-native-animatable";

export default function Login() {

    return (

      <ImageBackground source={require('../images/background.png')} style={styles.backgroundImage}>

      <Animatable.View
        animation="rubberBand"
        duration={2500}>
        <Text style={styles.texto}>SEJA BEM-VINDO(A) AO:</Text>
      </Animatable.View>

      <Animatable.Image
        animation="bounceInDown"
        duration={1800}
        style={{
          width: 180,
          height: 180
        }}
        source={require('../images/logo.png')}
      />

      <Animatable.View
        animation="rubberBand"
        duration={2500}>
        <Text style={styles.fraseapp}>Aplicativo para auxílio no acompanhamento do tratamento contra o câncer</Text>
      </Animatable.View>

      <KeyboardAvoidingView behavior="position" enabled>

      <Animatable.View
        animation="bounceInRight"
        duration={1100}>
        <TextInput
        style={styles.inputUm}
        placeholder="Digite seu e-mail"
        autoCorrect={false}
        />
      </Animatable.View>

      <Animatable.View
        animation="bounceInRight"
        duration={1200}>
        <TextInput
        style={styles.inputDois}
        placeholder="Digite sua senha"
        autoCorrect={false}
        secureTextEntry= {true}
        />
      </Animatable.View>

      </KeyboardAvoidingView>

      <Animatable.View
        animation="bounceInRight"
        duration={1400}>
        <TouchableOpacity 
          style={styles.botaoEntrar}
          onPress={ () => {this.props.navigation.navigator('Home')} }
        >
          <Text style={styles.botaoEntrarTexto}>Entrar</Text>
        </TouchableOpacity>
      </Animatable.View>

      <Animatable.View
        animation="rubberBand"
        duration={2600}>
        <TouchableOpacity style={styles.botaoCadastro}>
          <Text style={styles.botaoCadastroTexto}>Não tem uma conta? Cadastre-se</Text>
        </TouchableOpacity>
      </Animatable.View>


      <Animatable.View
        animation="rubberBand"
        duration={2800}>
        <TouchableOpacity style={styles.botaoEsqueci}>
          <Text style={styles.botaoEsqueciTexto}>Esqueci minha senha</Text>
        </TouchableOpacity>
      </Animatable.View>

      </ImageBackground>

      )
    }

    const styles = StyleSheet.create({

    texto: {
      justifyContent: 'center',
      alignItems: 'center',
      color: '#fFF',
      fontSize: 25,
      marginTop: 120,
      fontWeight: 'bold'
    },

    backgroundImage: {
      flexDirection: 'column',
      justifyContent: 'flex-start',
      width: '100%',
      height: '100%',
      alignItems: 'center'
    },

    inputUm:{
      backgroundColor: '#fff',
      color: '#222',
      opacity: 0.9,
      fontSize: 15,
      borderRadius: 7,
      width: 350,
      marginBottom: 15,
      padding: 10,
      marginTop: 50
    },

  inputDois:{
    backgroundColor: '#fff',
    color: '#222',
    opacity: 0.9,
    fontSize: 15,
    borderRadius: 7,
    width: 350,
    marginBottom: 10,
    padding: 10,
    marginTop: 5
  },

  botaoEntrar:{
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#35AAFF',
    height: 45,
    fontWeight: 'bold',
    width: 350,
    borderRadius: 7,
    marginTop: 40
  },

  botaoEntrarTexto:{
    color: '#FFF',
    fontSize: 18
  },

  botaoCadastro:{
    marginTop: 15
  },

  botaoCadastroTexto:{
    color:'#fff',
    fontSize: 12,
    opacity: 0.9
  },

  botaoEsqueci:{
    marginTop: 10
  },

  botaoEsqueciTexto:{
    color:'#fff',
    fontSize: 12,
    opacity: 0.9
  },

  fraseapp: {
    color:'#fff',
    fontSize: 12,
    marginTop: 0,
    width: 270,
    textAlign: 'center',
    opacity: 0.9
  },

  })

a linha docódigoqueestádando erroéonéesta o onPress nobotão“ entrar”estou trabalhando com expo react-native

Index.js或createAppContainer的详细信息,“'createAppContainer'é声明,请保留有效的名称。”。从“反应”开始“导入React,{Component}}陷入了困境。

javascript react-native react-navigation
1个回答
0
投票

this关键字在功能组件内部不起作用。然后您可以这样使用,

© www.soinside.com 2019 - 2024. All rights reserved.