Wie verwende ich React Navigation, um zu einem neuen Bildschirm außerhalb der Renderfunktion zu navigieren und JSX nicht zu verwenden?

Question

Ich bin ziemlich neu bei reagieren, reagiere nativ und reagieren Navigation. Fortschritte machen, aber auf dieses Problem einzugehen.

Normalerweise würde ich zu einer neuen Seite navigieren, indem Sie so etwas wie dies zu tun:

<Button 
    text='View Details' onPress={() => 
    this.props.navigation.navigate('AccountScreen')} /> 

Allerdings bin ich zur Zeit versucht, auf einen neuen Bildschirm in einem .fetch() zu navigieren, und fragen, was ich tun muss anders.

Siehe Code unten:

// AppNavigation.js: 
... 
const PrimaryNav = StackNavigator({ 
    HomeScreen: { screen: HomeScreen }, 
    AccountScreen: { screen: AccountScreen } 
}); 



// HomeScreen.js 
... 
handlePress = (navigator) => { 

    fetch('https://example.com/this/url/works' + this.state.accountName, lookUpObject).then(function(response) { 
    if(response.ok) { 

     // this does not work. 
     // returns this error: 
     // "undefined is not an object (evaluating 'navigator.navigate')" 
     navigator.navigate('AccountScreen', { "accountName": this.state.accountName }); 
    } 
    }) 

} 

render() { 
    const { navigate } = this.props.navigation; 

    reutrn (
    <ButtonCTA onPress={this.handlePress}>Go to account page</ButtonCTA> 
) 
} 

Im Moment bekomme ich folgende Fehlermeldung: "undefined is not an object (evaluating 'navigator.navigate')"

Answer 1

Sie haben vergessen, nur Navigator passieren in handlePress Ihre Schaltfläche Code sollte wie folgt aussehen:

<ButtonCTA onPress={()=>this.handlePress(this.props.navigation) }>Go to account page</ButtonCTA>