React Native栈导航中更新用户状态时如何停留在聊天页面？

算力阿峰

2026-6-18

解决方案

1. 修复自动返回Home的问题

新用户加入时自动跳回Home，大概率是socket监听新用户事件的逻辑中触发了不必要的导航操作，或是Home页面冗余的状态同步导致异常重渲染。

检查socket事件处理代码（如userJoined类事件），确认没有调用router.back()、navigate('home')这类跳转逻辑，如有直接移除。
简化Home页面的用户列表状态：无需用useState同步redux返回的用户数据，直接使用useSelector的结果即可，避免多余重渲染：

// Home页面移除冗余useState
const activeSocketUsers = useSelector((state: RootState) => state.socketReducer.users);

// FlatList直接用该变量作为数据源
<FlatList
  data={activeSocketUsers}
  // ...其他配置
/>

2. 在ChatPage获取实时用户列表

要在ChatPage停留的同时获取最新用户列表，直接在ChatPage中通过useSelector订阅redux状态即可，无需依赖静态的导航参数：

// ChatPage.tsx
import { useSelector } from 'react-redux';

// 实时获取更新后的用户列表
const activeSocketUsers = useSelector((state: RootState) => state.socketReducer.users);

// 可根据业务需求使用该列表，比如展示在线用户侧边栏等

3. 优化导航参数传递（可选）

当前跳转时的参数传递可以简化，无需JSON.stringify，直接传递对象：

// Home页面跳转代码优化
onPress={() => {
  router.navigate({
    pathname: "/chatpage",
    params: {
      from: socket.id,
      to: item.userID,
    },
  });
}}

// ChatPage中直接取参数
const { params } = useRoute();
const { from, to } = params;

修改后，新用户加入时：