React Native条件渲染失效：FlatList加载前无法显示加载屏

问题现象 #

想要在FlatList完全渲染完成后展示列表，否则显示加载屏，但原代码中加载屏从未出现，屏幕会先变白直到FlatList加载完成；但切换条件（用!mounted判断展示FlatList）时，加载屏能正常显示。

相关代码 #

组件代码 #

function FaqFlatList() {
    const [mounted, setMounted] = useState(false);

    useEffect(() => {
      console.log("mounted", mounted);
      setMounted(true);
    }, []);

    return (
      <View style={styles.subContainer}>
        {mounted ? (
          <FlatList
            ref={flatListRef}
            initialNumToRender={DATA.length}
            data={DATA}
            renderItem={renderItem}
            keyExtractor={(item, index) => index.toString()}
          />
        ) : (
          <View style={styles.loadingContainer}>
            <Text style={styles.title}>Loading...</Text>
          </View>
        )}
      </View>
    );
  }

样式代码 #

const styles = StyleSheet.create({
 subContainer: {
     flex: 1,
     width: "100%",
     alignItems: "center",
     justifyContent: "center",
     backgroundColor: "#d3aa72",
     margin: 20,
     marginTop: 0,
   },
   loadingContainer: {
    flex: 1,
    height: "100%",
    width: "100%",
    alignItems: "center",
    backgroundColor: "black",
    justifyContent: "center",
  },
  title: {
    fontSize: 40,
    fontFamily: "Quasimodo",
    textAlign: "center",
    color: "white",
    textShadowColor: "rgba(0, 0, 0, 1)",
    textShadowOffset: { width: -1, height: 1 },
    textShadowRadius: 10,
    marginTop: 10,
  },
});

原因分析 #

1. 原代码加载屏不显示的核心原因 #

• 组件初始渲染时，mounted为false，理论上会渲染加载屏，但**useEffect会在组件挂载后立即执行**，瞬间将mounted设为true，触发组件重新渲染，切换到FlatList分支。
• 你设置了initialNumToRender={DATA.length}，意味着FlatList需要一次性渲染所有列表项，这个过程会占用JS线程进行大量计算和原生视图创建工作。
• React的更新机制会把初始渲染（加载屏）和useEffect触发的更新（切换到FlatList）批量处理，加载屏的渲染和卸载几乎在同一帧完成，根本来不及被绘制到屏幕上。你看到的白屏，其实是FlatList尚未渲染完成时的容器空白状态。

2. 切换条件后加载屏能显示的原因 #

当你把判断条件改为!mounted展示FlatList（即mounted为true时显示加载屏），流程变成：

• 初始渲染mounted=false，先渲染FlatList，此时JS线程忙于渲染所有列表项，可能显示空白；
• useEffect执行后mounted设为true，组件重新渲染切换到加载屏——这时候JS线程已经完成FlatList的渲染工作，有空闲处理加载屏的渲染，所以加载屏能正常显示。

解决建议 #

如果要实现“FlatList完全渲染后再展示，否则显示加载屏”的需求，不能依赖useEffect的时机，而是要监听FlatList的渲染完成事件：

• 使用FlatList的viewabilityConfig和onViewableItemsChanged事件，判断所有列表项是否都已渲染完成：

function FaqFlatList() {
    const [isLoaded, setIsLoaded] = useState(false);
    const viewabilityConfig = useRef({
        itemVisiblePercentThreshold: 100,
        waitForInteraction: false
    });

    const onViewableItemsChanged = useRef(({ viewableItems }) => {
        if (viewableItems.length === DATA.length) {
            setIsLoaded(true);
        }
    });

    return (
      <View style={styles.subContainer}>
        {isLoaded ? (
          <FlatList
            ref={flatListRef}
            initialNumToRender={DATA.length}
            data={DATA}
            renderItem={renderItem}
            keyExtractor={(item, index) => index.toString()}
            viewabilityConfig={viewabilityConfig.current}
            onViewableItemsChanged={onViewableItemsChanged.current}
          />
        ) : (
          <View style={styles.loadingContainer}>
            <Text style={styles.title}>Loading...</Text>
          </View>
        )}
      </View>
    );
  }

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