React Native类组件页面间参数传递失败及报错排查：TypeError: onPress is not a function

架构老林

2026-4-30

解决React Native页面传参时的TypeError: onPress is not a function问题

我来帮你快速定位并解决这个问题！你遇到的报错本质是按钮点击回调的写法错误，咱们一步步来修正：

1. 核心错误：Button的onPress参数写错了

看你Screen1里的Button代码：

<Button title={"Login"} onPress = {()=> this.props.navigation.navigate('Screen2'), { Name: this.state.username }} />

这里你犯了一个语法错误：把navigate的参数对象{ Name: this.state.username }写在了箭头函数的外面，导致onPress接收的不是一个函数，而是逗号表达式的结果——也就是那个参数对象。这直接触发了“onPress不是函数”的报错。

修正后的写法：
把参数对象放到navigate方法的第二个参数里，整个逻辑包裹在箭头函数中：

<Button title={"Login"} onPress={() => this.props.navigation.navigate('Screen2', { Name: this.state.username })} />

2. 优化Screen2的参数获取（可选但推荐）

虽然修复上面的错误后你的代码就能正常运行，但在React Navigation的新版本中，更推荐用route.params来获取页面参数（navigation.state.params是旧版写法）。同时加上空值判断可以避免未传参时的报错：

// Screen2.js 修改后的代码
import React, { Component } from "react";
import { View, Text } from "react-native";

class Screen2 extends Component {
  render() {
    // 可选链操作符?.避免参数不存在时报错，默认显示Guest
    const userName = this.props.route?.params?.Name || "Guest";
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Text> Welcome {userName} </Text>
      </View>
    );
  }
}

export default Screen2;