React Native：如何使用类组件实现页面间数据传递

以下是基于React Navigation（React Native最常用的导航库）的两种主流场景实现方案：

1. 基于React Navigation 5+版本的实现 #

步骤1：在源页面（获取ID的类组件）跳转时传递参数 #

假设你已经从数据库中获取到了目标ID，在跳转至详情页时，通过navigation.navigate方法的第二个参数传递ID：

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

class ListScreen extends Component {
  state = {
    databaseId: null,
  };

  componentDidMount() {
    // 模拟从数据库获取ID的逻辑，实际替换为你的数据库查询代码
    const fetchedId = 'user_87654';
    this.setState({ databaseId: fetchedId });
  }

  render() {
    const { databaseId } = this.state;
    return (
      <View style={{ padding: 20 }}>
        <Text>当前获取的数据库ID：{databaseId}</Text>
        <Button
          title="进入详情页"
          onPress={() => {
            // 传递ID到Detail页面
            this.props.navigation.navigate('Detail', {
              targetId: databaseId,
            });
          }}
          style={{ marginTop: 20 }}
        />
      </View>
    );
  }
}

步骤2：在目标页面（类组件）接收参数 #

在目标页面中，通过this.props.route.params获取传递过来的ID：

import React, { Component } from 'react';
import { View, Text } from 'react-native';

class DetailScreen extends Component {
  render() {
    // 读取传递的ID，可添加默认值避免参数不存在时报错
    const targetId = this.props.route.params?.targetId || '默认ID';
    
    return (
      <View style={{ padding: 20 }}>
        <Text>接收的数据库ID：{targetId}</Text>
      </View>
    );
  }
}

导航配置（必填） #

确保在根组件中正确注册两个页面：

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="List">
        <Stack.Screen name="List" component={ListScreen} />
        <Stack.Screen name="Detail" component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

2. 基于React Navigation 4.x及更早版本的实现 #

如果你使用的是旧版导航库，传参逻辑略有不同：

源页面跳转传参 #

// ListScreen中的跳转逻辑
this.props.navigation.navigate('Detail', { targetId: databaseId });

目标页面接收参数 #

通过navigation.getParam方法获取参数，支持设置默认值：

// DetailScreen中读取参数
const targetId = this.props.navigation.getParam('targetId', '默认ID');

关键注意事项 #

• 确保在获取到数据库ID后再执行跳转操作（比如在componentDidMount的异步回调中完成状态更新后再触发跳转），避免传递null或undefined。
• 如果使用自定义导航组件，核心逻辑一致：将ID作为props传递给目标页面组件即可。

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