React Native中用goBack返回设置页并显示Snackbar的实现方法

核心思路是在提交反馈后，给Settings页面传递一个“已提交反馈”的标记，Settings页面检测到标记后显示Snackbar，并立即清除标记避免重复触发。以下是几种常见前端场景的具体实现：

方案1：路由状态传递（推荐） #

这种方式通过路由跳转时携带临时状态，不会暴露在URL中，体验更友好。

React + React Router #

提交反馈时，用navigate方法传递状态（替代直接goBack）：

// Feedback组件
import { useNavigate } from 'react-router-dom';

function Feedback() {
  const navigate = useNavigate();

  const handleSubmit = () => {
    // 执行表单提交逻辑
    navigate(-1, { state: { showFeedbackThanks: true } });
  };

  return <button onClick={handleSubmit}>提交反馈</button>;
}

在Settings组件中监听路由状态，显示Snackbar并清除状态：

// Settings组件
import { useLocation, useEffect, useState } from 'react';
import Snackbar from '@mui/material/Snackbar';

function Settings() {
  const location = useLocation();
  const [openSnackbar, setOpenSnackbar] = useState(false);

  useEffect(() => {
    if (location.state?.showFeedbackThanks) {
      setOpenSnackbar(true);
      // 清除历史状态，避免刷新或再次返回时重复显示
      window.history.replaceState({}, document.title);
    }
  }, [location.state]);

  const handleCloseSnackbar = () => setOpenSnackbar(false);

  return (
    <div>
      {/* 页面其他选项 */}
      <button onClick={() => navigate('/feedback')}>Send Feedback</button>
      
      <Snackbar
        open={openSnackbar}
        autoHideDuration={6000}
        onClose={handleCloseSnackbar}
        message="感谢您的反馈"
      />
    </div>
  );
}

Vue + Vue Router #

提交反馈时，通过修改历史状态后返回：

<!-- Feedback.vue -->
<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();

const submitFeedback = () => {
  // 表单提交逻辑
  window.history.replaceState({ showThanks: true }, document.title);
  router.go(-1);
};
</script>

在Settings页面中检测状态并显示Snackbar：

<!-- Settings.vue -->
<template>
  <div>
    <button @click="$router.push('/feedback')">Send Feedback</button>
    <el-snackbar v-model="showSnackbar" :duration="6000">感谢您的反馈</el-snackbar>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const showSnackbar = ref(false);

onMounted(() => {
  if (window.history.state?.showThanks) {
    showSnackbar.value = true;
    // 清除状态
    window.history.replaceState({}, document.title);
  }
});
</script>

React Native #

通过导航返回时传递参数：

// FeedbackScreen.js
import { Button } from 'react-native';
import { useNavigation } from '@react-navigation/native';

export default function FeedbackScreen() {
  const navigation = useNavigation();

  const submitFeedback = () => {
    // 提交表单逻辑
    navigation.goBack({ showThanks: true });
  };

  return <Button title="提交反馈" onPress={submitFeedback} />;
}

在SettingsScreen中监听参数变化：

// SettingsScreen.js
import { useState, useEffect } from 'react';
import { Button, View } from 'react-native';
import { Snackbar } from 'react-native-paper';
import { useNavigation, useRoute } from '@react-navigation/native';

export default function SettingsScreen() {
  const navigation = useNavigation();
  const route = useRoute();
  const [snackbarVisible, setSnackbarVisible] = useState(false);

  useEffect(() => {
    if (route.params?.showThanks) {
      setSnackbarVisible(true);
      // 清除参数，避免再次进入时重复触发
      navigation.setParams({ showThanks: false });
    }
  }, [route.params]);

  return (
    <View>
      <Button title="Send Feedback" onPress={() => navigation.navigate('Feedback')} />
      <Snackbar
        visible={snackbarVisible}
        onDismiss={() => setSnackbarVisible(false)}
        duration={3000}
      >
        感谢您的反馈
      </Snackbar>
    </View>
  );
}

方案2：全局状态管理 #

如果项目使用了全局状态库（如Redux、Pinia、MobX），可以通过全局状态标记来控制Snackbar显示。

React + Redux #

1. 定义状态和action：

// store/slices/feedbackSlice.js
import { createSlice } from '@reduxjs/toolkit';

const feedbackSlice = createSlice({
  name: 'feedback',
  initialState: {
    hasSubmitted: false
  },
  reducers: {
    setSubmitted: (state) => {
      state.hasSubmitted = true;
    },
    resetSubmitted: (state) => {
      state.hasSubmitted = false;
    }
  }
});

export const { setSubmitted, resetSubmitted } = feedbackSlice.actions;
export default feedbackSlice.reducer;

2. 提交反馈时更新状态：

// Feedback组件
import { useDispatch } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import { setSubmitted } from '../store/slices/feedbackSlice';

function Feedback() {
  const dispatch = useDispatch();
  const navigate = useNavigate();

  const handleSubmit = () => {
    // 提交表单逻辑
    dispatch(setSubmitted());
    navigate(-1);
  };

  return <button onClick={handleSubmit}>提交反馈</button>;
}

3. Settings组件监听状态并显示Snackbar：

// Settings组件
import { useSelector, useDispatch } from 'react-redux';
import { useEffect, useState } from 'react';
import { resetSubmitted } from '../store/slices/feedbackSlice';
import Snackbar from '@mui/material/Snackbar';

function Settings() {
  const hasSubmitted = useSelector(state => state.feedback.hasSubmitted);
  const dispatch = useDispatch();
  const [openSnackbar, setOpenSnackbar] = useState(false);

  useEffect(() => {
    if (hasSubmitted) {
      setOpenSnackbar(true);
      dispatch(resetSubmitted());
    }
  }, [hasSubmitted]);

  return (
    <div>
      {/* 页面内容 */}
      <Snackbar
        open={openSnackbar}
        autoHideDuration={6000}
        onClose={() => setOpenSnackbar(false)}
        message="感谢您的反馈"
      />
    </div>
  );
}

方案3：URL参数传递（简单但不推荐） #

通过URL查询参数传递标记，适合轻量场景，但参数会暴露在地址栏：

// React + React Router示例
// Feedback组件
function Feedback() {
  const navigate = useNavigate();

  const handleSubmit = () => {
    // 提交表单逻辑
    navigate('/settings?feedback=submitted');
  };
}

// Settings组件
import { useNavigate, useSearchParams } from 'react-router-dom';
import { useEffect, useState } from 'react';

function Settings() {
  const [searchParams] = useSearchParams();
  const navigate = useNavigate();
  const [openSnackbar, setOpenSnackbar] = useState(false);

  useEffect(() => {
    if (searchParams.get('feedback') === 'submitted') {
      setOpenSnackbar(true);
      // 移除参数，避免刷新重复显示
      searchParams.delete('feedback');
      navigate({ search: searchParams.toString() }, { replace: true });
    }
  }, []);

  return (
    <Snackbar
      open={openSnackbar}
      autoHideDuration={6000}
      onClose={() => setOpenSnackbar(false)}
      message="感谢您的反馈"
    />
  );
}

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