如何用React Navigation实现多屏传参？含Screen2条件传参需求

以下是基于React Navigation的完整实现方案，包含Screen1传参、Screen2用if判断处理参数并传递到Screen3的代码：

Screen1 实现（给Screen2传参） #

import { Button, View } from 'react-native';
import { useNavigation } from '@react-navigation/native';

function Screen1() {
  const navigation = useNavigation();

  return (
    <View>
      <Button 
        title="按钮1" 
        onPress={() => navigation.navigate('Screen2', { data: '数据1' })} 
      />
      <Button 
        title="按钮2" 
        onPress={() => navigation.navigate('Screen2', { data: '数据2' })} 
      />
      <Button 
        title="按钮3" 
        onPress={() => navigation.navigate('Screen2', { data: '数据3' })} 
      />
      <Button 
        title="按钮4" 
        onPress={() => navigation.navigate('Screen2', { data: '数据4' })} 
      />
    </View>
  );
}

export default Screen1;

Screen2 实现（用if判断传递参数到Screen3） #

这里提供两种常见的if判断场景，你可以根据需求选择：

场景1：仅当数据符合指定条件时，才传递到Screen3 #

import { Button, View, Text } from 'react-native';
import { useRoute, useNavigation } from '@react-navigation/native';

function Screen2() {
  const route = useRoute();
  const navigation = useNavigation();
  const receivedData = route.params?.data; // 用可选链避免参数未传递时报错

  const goToScreen3 = () => {
    // 仅允许传递'数据1'和'数据2'到Screen3
    if (receivedData === '数据1' || receivedData === '数据2') {
      navigation.navigate('Screen3', { passedData: receivedData });
    } else {
      alert('当前数据无法传递到Screen3');
    }
  };

  return (
    <View>
      <Text>从Screen1收到的数据：{receivedData}</Text>
      <Button title="跳转到Screen3" onPress={goToScreen3} />
    </View>
  );
}

export default Screen2;

场景2：根据接收的数据做不同处理后，再传递到Screen3 #

import { Button, View, Text } from 'react-native';
import { useRoute, useNavigation } from '@react-navigation/native';

function Screen2() {
  const route = useRoute();
  const navigation = useNavigation();
  const receivedData = route.params?.data;

  const goToScreen3 = () => {
    let processedData;
    // 根据不同数据做处理
    if (receivedData === '数据1') {
      processedData = `${receivedData} - 已完成预处理`;
    } else if (receivedData === '数据2') {
      processedData = `${receivedData} - 已验证通过`;
    } else {
      // 其他数据直接传递原内容
      processedData = receivedData;
    }
    // 把处理后的数据传给Screen3
    navigation.navigate('Screen3', { passedData: processedData });
  };

  return (
    <View>
      <Text>从Screen1收到的数据：{receivedData}</Text>
      <Button title="跳转到Screen3" onPress={goToScreen3} />
    </View>
  );
}

export default Screen2;

Screen3 实现（接收Screen2传递的参数） #

import { View, Text } from 'react-native';
import { useRoute } from '@react-navigation/native';

function Screen3() {
  const route = useRoute();
  const receivedData = route.params?.passedData;

  return (
    <View>
      <Text>从Screen2收到的数据：{receivedData}</Text>
    </View>
  );
}

export default Screen3;

注意事项 #

• 确保你已经在导航栈中正确注册了这三个页面（比如在StackNavigator里配置好）
• route.params?.data中的?.是可选链操作符，能有效避免因参数未传递导致的程序崩溃，适合新手使用
• if判断的逻辑可以完全根据你的业务需求修改，比如判断数据类型、数值范围等

内容的提问来源于stack exchange，提问作者Tejas M A