0

Estoy siguiendo el tutorial oficial de React Navigation y en el primer ejemplo de poner un botón en la pantalla Home, que redirige a la pantalla Details, me salta el error.

Supuestamente hay que poner esta linea:

<Button
      title="Go to Details"
      onPress={() => this.props.navigation.navigate('Details')}
    />

Yo tengo exactamente la misma, con la diferencia que en vez de Details pongo List:

const Home = () => {
    return (
        <View>
            <Text>This the Home Screen</Text>
            <Button title="Ir a la lista más visitada" 
                onPress={() => this.props.navigation.navigate('List')}
            />
        </View>
    )
}

export default Home

Este es mi código completo y lo he puesto igual que en el tutorial:

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import Activity from './screens/Activity'
import Home from './screens/Home'
import List from './screens/List'
import Settings from './screens/Settings'

export default function App() {
  return (
    <AppContainer />
  );
}

const AppNavigator = createStackNavigator({
  Home: Home ,
  Activity: Activity,
  List: List ,
  Settings: Settings 
}, {initialRouteName: 'Home'})
const AppContainer = createAppContainer(AppNavigator)

Y el componente List al que quiero llegar:

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

const List = () => {
    return (
        <View>
            <Text>The List screen</Text>
        </View>
    )
}

export default List

He probado en embrazar el onPress en un String() y no ha funcionado. La app sólo me da error cuando pulso el botón. O sea que el error deberia estar en la linea de el onPress

TypeError: undefined is not an object
(evaluating '_this.props.navigation')
1
  • EDITO: Acabo de solucionarlo cambiando las funciones por clases...Si alguien tiene alguna solución para conservar las funciones, lo agradecería.! Commented el 16 dic. 2019 a las 17:01

1 respuesta 1

1

Como pones en tu comentario, la solución para las funciones, sería recibir como parámetros los props. De la siguiente forma:

const Home = ({ navigation }) => {
  return (
    <View>
      <Text>This the Home Screen</Text>
      <Button title="Ir a la lista más visitada" 
        onPress={() => navigation.navigate('List')}
      />
    </View>
  )
}

export default Home;

Donde { navigation } es el objeto de props que recibe como parámetro, y se está deconstruyendo. También es válido este código:

const Home = (props) => {
  return (
    <View>
      <Text>This the Home Screen</Text>
      <Button title="Ir a la lista más visitada" 
        onPress={() => props.navigation.navigate('List')}
      />
    </View>
  )
}

export default Home;
2
  • Gracias. Por cierto, si quiero añadir static navigationOptions = { } dentro de esa función tendría que cambiar algo en concreto? O mejor ese parámetro se reserva para los componentes que deben llevar state.? Es decir solo lo puedo usar en clases. Commented el 17 dic. 2019 a las 16:46
  • 1
    Podrías antes de hacer el export definirlo a parte como Home.navigationOptions = ({ navigation }) => ({ ... }) de esta forma puede funcionar Commented el 17 dic. 2019 a las 21:07

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.