React Native导航至新页面后渲染前执行逻辑的解决方案

针对你在标签页+堆栈导航架构下，跳转至MessagesScreen后需要在渲染前执行数据获取等逻辑的需求，以下是几种可落地的方案：

1. 用 useEffect 监听路由参数 #

结合React的useEffect钩子与React Navigation提供的useRoute钩子，在组件挂载或路由参数变化时触发逻辑：

// MessagesScreen.jsx
import { useEffect, useState } from 'react';
import { useRoute } from '@react-navigation/native';
import { View, ActivityIndicator, FlatList, Text } from 'react-native';

const MessagesScreen = () => {
  const route = useRoute();
  const [messages, setMessages] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchMessages = async () => {
      setLoading(true);
      try {
        // 替换为你的实际接口地址
        const response = await fetch(`/api/chats/${route.params.chatId}/messages`);
        const data = await response.json();
        setMessages(data);
      } catch (err) {
        console.error('获取消息失败:', err);
      } finally {
        setLoading(false);
      }
    };

    fetchMessages();
  }, [route.params.chatId]); // 依赖chatId，参数更新时重新执行

  if (loading) {
    return <View style={{ flex: 1, justifyContent: 'center' }}>
      <ActivityIndicator size="large" color="#0066cc" />
    </View>;
  }

  return (
    <FlatList
      data={messages}
      renderItem={({ item }) => <Text style={{ padding: 12 }}>{item.content}</Text>}
      keyExtractor={(item) => item.id.toString()}
    />
  );
};

export default MessagesScreen;

2. 用 useFocusEffect 处理标签页切换场景 #

如果存在标签页切换（比如从Messages切到其他标签再返回），useEffect仅在首次挂载时执行，这时用useFocusEffect可确保每次页面获得焦点时都触发逻辑：

// MessagesScreen.jsx
import { useState } from 'react';
import { useRoute } from '@react-navigation/native';
import { useFocusEffect } from '@react-navigation/native';
import { View, ActivityIndicator, FlatList, Text } from 'react-native';

const MessagesScreen = () => {
  const route = useRoute();
  const [messages, setMessages] = useState([]);
  const [loading, setLoading] = useState(true);

  useFocusEffect(
    React.useCallback(() => {
      const fetchMessages = async () => {
        setLoading(true);
        try {
          const response = await fetch(`/api/chats/${route.params.chatId}/messages`);
          const data = await response.json();
          setMessages(data);
        } catch (err) {
          console.error('获取消息失败:', err);
        } finally {
          setLoading(false);
        }
      };

      fetchMessages();

      // 可选：返回清理函数，比如取消未完成的请求
      return () => {
        // 可添加AbortController逻辑终止请求
      };
    }, [route.params.chatId])
  );

  // 加载状态与渲染逻辑同方案1
};

3. 跳转前预加载数据（优化等待体验） #

如果想减少页面等待时间，可在Chats.jsx的跳转逻辑中提前发起请求，再将数据传递给目标页面：

// Chats.jsx
<Pressable
  onPress={async () => {
    let preFetchedMessages = null;
    try {
      const response = await fetch(`/api/chats/${chat.id}/messages`);
      preFetchedMessages = await response.json();
    } catch (err) {
      console.error('预加载消息失败:', err);
    }
    props.navigate('Messages', { chatId: chat.id, preFetchedMessages });
  }}
>
  <Chats />
</Pressable>

然后在MessagesScreen中直接使用预加载数据，无数据时再兜底获取：

// MessagesScreen.jsx
import { useEffect, useState } from 'react';
import { useRoute } from '@react-navigation/native';

const MessagesScreen = () => {
  const route = useRoute();
  const [messages, setMessages] = useState(route.params.preFetchedMessages || []);
  const [loading, setLoading] = useState(!route.params.preFetchedMessages);

  useEffect(() => {
    if (!route.params.preFetchedMessages) {
      // 无预加载数据时执行获取逻辑
      const fetchMessages = async () => {
        setLoading(true);
        try {
          const response = await fetch(`/api/chats/${route.params.chatId}/messages`);
          const data = await response.json();
          setMessages(data);
        } catch (err) {
          console.error('获取消息失败:', err);
        } finally {
          setLoading(false);
        }
      };

      fetchMessages();
    }
  }, [route.params.chatId, route.params.preFetchedMessages]);

  // 加载状态与渲染逻辑同方案1
};

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