Question

我在React，React Native和React Navigation上相当新。取得一些进展，但遇到了这个问题。

通常我会通过以下方式导航到新页面：

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

但是，我目前正试图导航到.fetch()中的新屏幕，并想知道我需要采取哪些不同的做法。

见下面的代码：

// 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>
  )
}

现在我收到以下错误： "undefined is not an object (evaluating 'navigator.navigate')"

Answer 1

您忘了将导航器传递给handlePress 您的按钮代码应如下所示：

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

如何使用React Navigation导航到渲染功能之外的新屏幕，而不是使用JSX？

1 个答案: