Intento utilizar la navegación entre pantallas en mi aplicación RN. Este es mi código: INDEX.ANDROID.JS:

import React, { Component } from 'react';
import {
AppRegistry,
Text,
View ,
Button
} from 'react-native';
import {StackNavigator} from 'react-navigation';
import Login from './app/components/Todo';
const SimpleApp = StackNavigator({
Login: { screen: Todo },
});
export default class aap extends Component {
static navigationOptions = { title: 'Welcome', };
render() {
const { navigate } = this.props.navigation;
return (
<Button onPress ={() => navigate('Todo') } title="go"/>
);
}
}
AppRegistry.registerComponent('aap', () => aap);

Aquí está el código de la segunda pantalla TODO.JS

import React, { Component } from 'react';
import {
AppRegistry,
Text,
View ,
Button
} from 'react-native'; 
export default class Todo extends Component {
render() {
return (
 <View>
    <Text>
    Here is my text 
    </Text>
 </View>
);

}}

Cuando ejecuto mi código, aparece un error: undefined no es un objeto this.props.naviagtion. Se agradece cualquier ayuda

0
Sihem Hcine 13 jul. 2017 a las 17:02

2 respuestas

La mejor respuesta

No está utilizando StackNavigator correctamente. Como dijo @xght, debería registrarse SimpleApp en lugar de aap. Además, debería utilizar aap como ruta inicial a su StackNavigator SimpleApp. Esto debería verse así:

import React, { Component } from 'react';
import {
  AppRegistry,
  Text,
  View ,
  Button
} from 'react-native';
import {StackNavigator} from 'react-navigation';
import Todo from './app/components/Todo';

class aap extends Component {
  static navigationOptions = { title: 'Welcome', };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <Button onPress ={() => navigate('Todo') } title="go"/>
    );
  }
}

const SimpleApp = StackNavigator({
  Login: { screen: aap },
  Todo: { screen: Todo },
});

AppRegistry.registerComponent('aap', () => SimpleApp);
1
hyb175 13 jul. 2017 a las 19:03

Ha registrado el componente incorrecto, por lo que el navegador SimpleApp no pasa la propiedad de navegación a su componente.

Reemplazar

AppRegistry.registerComponent('aap', () => aap); por:

AppRegistry.registerComponent('aap', () => SimpleApp);

Y también olvidó agregar su componente aap en las rutas de SimpleApp. Y su import Login from './app/components/Todo'; es incorrecto: Login es el nombre de la ruta en SimpleApp y Todo es el nombre del componente, por lo que debe reemplazarlo por import Todo...

1
xght 13 jul. 2017 a las 18:04