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')