如何让React Native应用始终从指定屏幕启动并处理权限跳转

核心问题分析 #

原代码存在几个关键问题：

• useEffect中修改reload会引发无限循环：loading/data变化触发useEffect，修改reload后又会重新调用useFetchHook，再次改变loading/data，循环往复。
• 未监听页面聚焦事件：从LicenseScreen返回时，无法自动重新触发API调用。
• customers初始化逻辑不合理：组件挂载时data还未返回，初始值应为空数组，且状态更新依赖不清晰。
• FlatList的renderItem存在冗余判断：customers.includes(item)完全多余，且可能引发不必要的性能损耗。

修复方案与代码实现 #

我们需要利用useFocusEffect监听页面聚焦（覆盖应用启动、从其他页面返回的场景），同时调整API调用的触发逻辑，避免循环，并确保API返回异常时强制跳转，返回后重新校验：

import { useFocusEffect } from '@react-navigation/native';
import { useCallback, useState } from 'react';
import { View, FlatList } from 'react-native';

const AllClient = () => {
  const navigation = useNavigation();
  const { state } = useAuth();
  
  // 初始化customers为空数组，避免FlatList报错
  const [customers, setCustomers] = useState([]);
  // 控制API调用的触发状态
  const [triggerFetch, setTriggerFetch] = useState(true);
  const [loading, data] = useFetchHook(
    `/api/customer/all_is_customers/${state?.user?.id}`,
    triggerFetch
  );

  // 监听页面聚焦：每次页面激活（启动/返回）时重新触发API调用
  useFocusEffect(
    useCallback(() => {
      setTriggerFetch(prev => !prev);
    }, [])
  );

  // 处理API返回结果
  useCallback(() => {
    if (!loading && data) {
      if (data.code === -1) {
        // 强制跳转到LicenseScreen，返回后会重新触发API校验
        navigation.navigate("license");
      } else {
        // 更新客户列表数据，兜底空数组避免异常
        setCustomers(data.obj || []);
      }
    }
  }, [loading, data, navigation]);

  return (
    <View>
      {/* 加载中状态提示（可根据需求自定义） */}
      {loading && <View>{/* 加载组件 */}</View>}
      
      {/* 仅当API加载完成且返回正常时，才渲染FlatList */}
      {!loading && data?.code !== -1 && (
        <FlatList
          keyExtractor={(item) => item.id.toString()}
          className="flex-1 mb-3"
          data={customers}
          renderItem={({ item }) => <CustomerRow customer={item} />}
        />
      )}
    </View>
  );
};

关键修复点说明 #

• useFocusEffect监听页面激活：替代原有的useEffect触发逻辑，确保应用启动、从LicenseScreen返回时，都会重新调用API。useCallback用于避免不必要的重渲染。
• 避免无限循环：将API触发逻辑与结果处理逻辑分离，triggerFetch仅在页面聚焦时切换状态，API返回后只处理数据或路由，不再修改触发状态。
• 条件渲染FlatList：只有当API加载完成且返回正常时，才渲染FlatList，彻底避免用户看到未授权的内容。
• 简化FlatList逻辑：移除冗余的customers.includes(item)判断，直接渲染CustomerRow。
• 状态初始化优化：customers初始化为空数组，避免FlatList因data为undefined报错。

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