React Native中用.map而非FlatList时ActivityIndicator不生效如何解决

你的代码无法运行有三个核心问题：

• .map()遍历的回调函数中直接返回了两个同级的<Text>组件，没有父容器包裹，不符合JSX语法规则，会直接抛出解析错误。
• 加载状态判断逻辑错误：如果dataList的初始值是空数组[]，空数组在JavaScript中属于真值（truthy），三元表达式会直接进入列表渲染分支，永远不会展示加载指示器。
• 同一条列表项内的两个<Text>组件重复使用index作为key，会触发React的key重复警告，可能导致渲染行为异常。

你只需要单独维护加载状态变量、给map内的多元素增加外层包裹即可，完全可以保留.map()遍历的写法，不需要强制换成FlatList。

第一步：定义状态 #

import { View, Text, ActivityIndicator } from 'react-native';
import { useState, useEffect } from 'react';

export default function CategoryList() {
  // 列表数据初始值设为空数组
  const [dataList, setDataList] = useState([]);
  // 单独维护加载状态，初始为加载中
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const loadData = async () => {
      setIsLoading(true);
      // 替换为你实际的接口请求逻辑
      const response = await fetch('你的接口请求地址');
      const result = await response.json();
      setDataList(result);
      setIsLoading(false);
    };
    loadData();
  }, []);

第二步：渲染逻辑 #

return (
    <View style={{ flex: 1, padding: 16 }}>
      {isLoading ? (
        // 可以自定义加载器的大小、颜色，建议加样式让它居中显示
        <ActivityIndicator size="large" color="#1677ff" style={{ marginTop: 50 }} />
      ) : (
        <View>
          {dataList.map((item, index) => (
            // 单条列表项外层包一层View，也可以用<>空标签代替，不会增加额外视图层级
            <View key={index} style={{ paddingVertical: 12, borderBottomWidth: 1 }}>
              <Text style={{ fontSize: 16, fontWeight: '500' }}>{item.category_name}</Text>
              <Text style={{ fontSize: 14, color: '#666', marginTop: 4 }}>{item.category_number}</Text>
            </View>
          ))}
        </View>
      )}
    </View>
  );
}

• 如果接口返回的列表项有唯一标识字段（比如category_id），建议用这个唯一字段代替index作为key，避免列表动态增删时出现渲染错乱。
• 如果不想额外嵌套View，可以把单条列表的外层<View>替换成<>（React.Fragment的简写），不会产生多余的原生节点。

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