tuve un problema al ejecutar mi código en reaccionar-native (he actualizado la última versión y pensé que el problema no era la actualización) El problema proviene de cuando importo las bibliotecas de react-navigation y quiero redirigir con un botón de App.js (archivo principal) a login.js (el archivo que quiero redirigir o abrir) el error viene cuando se coloca la siguiente línea de código
const {navigate} = this.props.navigation;
Esa línea se agrega para que la palabra navegar del siguiente código tenga sentido
onPress = {navigate ('login')}
Pero cuando escribo const {navigate} = this.props.navigation; me aparece el siguiente error
TypeError: Udefined is not a object (evaluating 'this.props.navigation.navigate')
Mi pregunta sería cómo resolver este error. De todos modos para que se pueda ver mejor mi problema dejo mi código. Muchas gracias por cualquier respuesta.
Mi codigo:
//App.js
import React, { Component } from "react";
import { View, StyleSheet, Image, Text, Button } from "react-native";
import { StackNavigator }from 'react-navigation';
import login from './login';
//const onButtonPress = () => {
// Alert.alert('myapp');
//}
const App = StackNavigator({
login: login,
});
export default class indextempo extends React.Component {
static navigationOptions = {
title: 'myapp',
};
render() {
const {navigate} = this.props.navigation;
return (
<View style={styles.root}>
<Image
source={require("./files/images/fond.jpg")}
style={styles.image1}
/>
<Text style={styles.text1}>myapp</Text>
<Text style={styles.text2}>myapp</Text>
<Image
source={require("./files/images/linkedin.png")}
style={styles.image4}
/>
<Image
style={styles.image5}
source={require("./files/images/facebook.png")}
/>
<Image
style={styles.image6}
source={require("./files/images/google.png")}
/>
<View style={styles.rect1}>
<Button
onPress={navigate('login')}
title="Entrar en la demo"
color="rgba(82,113,255,1)"
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
root: { backgroundColor: "white", flex: 1 },
image1: {
position: "absolute",
width: 515.4,
height: 868.18,
top: -14.55,
left: -18.5
},
text1: {
backgroundColor: "transparent",
top: 57.95,
left: 124.52,
position: "absolute",
height: 44.71,
width: 110.94,
fontSize: 38,
color: "rgba(82,113,255,1)",
textAlign: "center"
},
text2: {
backgroundColor: "transparent",
top: 101.97,
left: 73.02,
position: "absolute",
height: 19.54,
width: 213.94,
fontSize: 15,
color: "rgba(0,0,0,1)",
textAlign: "center"
},
image3: {
position: "absolute",
width: 81.94,
height: 73.21,
top: 307.68,
left: 139.03,
margin: "auto"
},
rect1: {
backgroundColor: "transparent",
height: 40.79,
width: 165.34,
top: 550.81,
left: 104.83,
position: "absolute",
borderWidth: 0,
borderColor: "#000000",
borderRadius: 100,
opacity: 1,
margin: "auto",
},
image4: {
position: "absolute",
width: 22.36,
height: 22.53,
top: 696.97,
left: 336.72,
margin: "auto"
},
image5: {
top: 696.68,
left: 313.01,
width: 22.36,
height: 22.53,
position: "absolute",
margin: "auto"
},
image6: {
top: 696.4,
left: 289.01,
width: 22.36,
height: 22.53,
position: "absolute",
margin: "auto"
}
});
//login.js
import React, { Component } from "react";
import {
Container,
Header,
Title,
Content,
Button,
Item,
Label,
Input,
Body,
Left,
Right,
Icon,
Form,
Text
} from "native-base";
import { StackNavigator } from 'react-navigation';
class login extends Component {
render() {
return (
<Container style={styles.container}>
<Header>
<Body>
<Title>Myapp</Title>
</Body>
<Right />
</Header>
<Content>
<Form>
<Item stackedLabel>
<Label>Nombre de usuario</Label>
<Input />
</Item>
<Item stackedLabel last>
<Label>Contraseña</Label>
<Input secureTextEntry />
</Item>
</Form>
<Button block style={{ margin: 15, marginTop: 50 }}>
<Text>Iniciar sesion</Text>
</Button>
</Content>
</Container>
);
}
}
export default login;
Gracias