React Navigation：点击不同按钮跳转同页并传参，处理目标页数值

当然可以实现这个需求！其实React Navigation本身就支持跳转时传递参数，你之前没找到解决方案可能是没抓对传递和接收参数的关键点。我给你整理了完整的实现代码和说明：

我们只需要在按钮点击时传递自定义参数，再在目标页面接收并处理这些参数即可，以下是完整的可运行示例：

完整代码示例 #

import React from 'react';
import { Button, View, Text } from 'react-native';
import { StackNavigator } from 'react-navigation';

// 首页：包含两个跳转按钮，传递不同参数
class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', gap: 20 }}>
        <Text>首页</Text>
        {/* 按钮1：传递数值10及来源标识 */}
        <Button
          title="跳转到详情页（数值10）"
          onPress={() => {
            this.props.navigation.navigate('Detail', {
              targetValue: 10,
              fromButton: '按钮1'
            });
          }}
        />
        {/* 按钮2：传递数值20及来源标识 */}
        <Button
          title="跳转到详情页（数值20）"
          onPress={() => {
            this.props.navigation.navigate('Detail', {
              targetValue: 20,
              fromButton: '按钮2'
            });
            // 你可以传递任意类型的参数：数字、字符串、对象都支持
          }}
        />
      </View>
    );
  }
}

// 详情页：接收并处理传递过来的参数
class DetailScreen extends React.Component {
  render() {
    // 从导航参数中获取值，getParam第二个参数是默认值（可选）
    const targetValue = this.props.navigation.getParam('targetValue', 0);
    const fromButton = this.props.navigation.getParam('fromButton', '未知按钮');

    // 这里可以根据参数做任意业务处理，比如计算、渲染不同UI
    const processedValue = targetValue * 2;

    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', gap: 15 }}>
        <Text>来自{fromButton}的原始数值：{targetValue}</Text>
        <Text>处理后的数值（乘以2）：{processedValue}</Text>
        <Button
          title="返回首页"
          onPress={() => this.props.navigation.goBack()}
        />
      </View>
    );
  }
}

// 配置StackNavigator导航
const AppNavigator = StackNavigator(
  {
    Home: {
      screen: HomeScreen,
      navigationOptions: { title: '首页' }
    },
    Detail: {
      screen: DetailScreen,
      // 还可以根据参数动态设置页面标题
      navigationOptions: ({ navigation }) => ({
        title: `详情页（数值${navigation.getParam('targetValue', 0)}）`
      })
    }
  },
  { initialRouteName: 'Home' }
);

export default class App extends React.Component {
  render() {
    return <AppNavigator />;
  }
}

核心逻辑说明 #

• 传递参数：在navigation.navigate的第二个参数中，传入一个自定义对象，把需要传递的数值、标识等都放在这个对象里即可。
• 接收参数：在目标页面使用this.props.navigation.getParam('参数名', 默认值)获取参数，默认值是可选的，防止参数未传递时出现错误。
• 参数处理：拿到参数后，你可以根据需求做任何逻辑处理——比如计算数值、渲染不同的内容、触发不同的接口请求等，完全由传递的参数控制。

版本适配提示 #

如果你使用的是React Navigation v5+版本（当前主流版本），API会略有不同，参数需要通过route.params获取，示例如下：

// 在DetailScreen中（v5+）
const { targetValue, fromButton } = this.props.route.params;

不过根据你提供的代码，你使用的是旧版react-navigation的StackNavigator，所以上面的示例完全适配你的当前环境。

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