类组件中React Navigation按钮跳转失效问题求助

嘿，你的跳转按钮失效的问题很容易解决，核心问题出在**onPress的写法错误**上！

错误原因 #

你当前的代码是这样写的：

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

这里你直接调用了this.props.navigation.navigate('RegisterPage')，这会导致组件渲染时就立即执行跳转逻辑，而不是等用户点击按钮的时候才触发。onPress需要接收一个函数引用，而不是函数执行后的结果。

修复方法 #

有两种常见的正确写法：

方法1：使用箭头函数包裹 #

把跳转逻辑放在箭头函数里，这样只有点击按钮时才会执行：

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

方法2：定义类方法（更适合复杂逻辑） #

如果后续跳转前需要加验证等逻辑，可以在Login类里定义一个专门的方法：

class Login extends Component {
  // 定义跳转方法
  handleGoToRegister = () => {
    this.props.navigation.navigate('RegisterPage');
  }

  renderLoginform(){
    // ...其他代码
    return (
      // ...其他元素
      <Button title='Go to Register' onPress={this.handleGoToRegister}></Button>
    )
  }
}

额外检查点 #

如果修复后还是无法跳转，可以确认以下两点：

• 确保Login组件确实接收到了navigation props：因为你把Login直接配置为栈的screen，createStackNavigator会自动注入navigation props，所以这一步应该没问题，但如果Login被其他自定义组件包裹，可能需要用withNavigation高阶组件来传递props。
• 确认栈配置里的页面名称RegisterPage和你跳转时用的名称完全一致（大小写敏感），你的homeStack.js里的配置是对的，这一步应该没问题。

内容的提问来源于stack exchange，提问作者Gui Be