在react本机中的goBack上设置导航参数

在React Native中，goBack 方法通常用于返回到上一个屏幕。如果你想在返回时设置导航参数，可以使用 navigation.navigate 方法来实现。以下是一些基础概念和相关步骤：

基础概念

导航参数：这些是在导航过程中传递的数据，可以在不同的屏幕之间共享。
React Navigation：这是React Native中最常用的导航库，提供了多种导航器（如StackNavigator、TabNavigator等）。

类型

查询参数（Query Params）：类似于URL中的查询字符串。
路由参数（Route Params）：在定义路由时指定的参数。

应用场景

表单提交后返回并显示结果。
在多个屏幕之间传递用户信息。
保持应用状态。

示例代码

假设你有两个屏幕：ScreenA 和 ScreenB。你想从 ScreenB 返回到 ScreenA 并传递一些参数。

ScreenA.js

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

const ScreenA = () => {
  const navigation = useNavigation();

  return (
    <View>
      <Text>Screen A</Text>
      <Button title="Go to Screen B" onPress={() => navigation.navigate('ScreenB')} />
      {/* 这里可以显示从ScreenB返回的参数 */}
      {navigation.getParam('result') && <Text>Result from Screen B: {navigation.getParam('result')}</Text>}
    </View>
  );
};

export default ScreenA;

ScreenB.js

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

const ScreenB = () => {
  const navigation = useNavigation();

  const handleGoBack = () => {
    // 设置导航参数并返回
    navigation.navigate('ScreenA', { result: 'Success' });
  };

  return (
    <View>
      <Text>Screen B</Text>
      <Button title="Go Back to Screen A" onPress={handleGoBack} />
    </View>
  );
};

export default ScreenB;