React Native未渲染ActivityIndicator却出现陌生Loading组件求助

尝试用React Native的ActivityIndicator实现加载动画，已通过模拟REST API测试功能，但isLoading为true时，自定义的加载组件不显示，反而在左上角出现未创建的"Loading..."文本。

相关代码 #

模拟API接口函数 #

async fetchFishDetails(fishId: number): Promise<ApiResponse<any>> {
        let fish: Fish | undefined
        let user: any | undefined

        fish = this.user1.fishes.find(fish => fish.id === fishId)
        user = this.user1
        if (fish === undefined) {
            fish = this.user2.fishes.find(fish => fish.id === fishId);
            user = this.user2
        }

        await new Promise(resolve => setTimeout(resolve, 1000))
        
        return {
            status: 200,
            body: {fishDetails: fish, user: user}
        }
    }

API响应处理函数 #

export const getFishDetails = async (fishId: number): Promise<ServiceResponse<any>> => {
    console.debug('getFishDetails(), fishId=', fishId);

    try {
        const response = await fishRestApi.fetchFishDetails(fishId);
        
        if (response.status === 200) {
            return new ServiceResponse(Type.SUCCESS, response.body);
        } else {
            console.error('Error occurred fetching fish from backend')
            return new ServiceResponse(Type.FAIL, undefined);
        }
    } catch (error) {
        console.error('Error occurred getting fish, err=', error);
        return new ServiceResponse(Type.FAIL, undefined);
    }
};

组件数据获取逻辑 #

useEffect(() => {
    setIsLoading(true)
    console.log('start loading')
    getFishDetails(fishId)
        .then(response => {
            if (response.type === Type.SUCCESS) {
                const {fishDetails, user} = response.body;
                setFishDetails(fishDetails);
                setUser(user);
                setProfilePictureUri(user.picture ? {uri: user.picture} : require('../assets/user-default.png'));
            } else {
                console.log('Failed to get fish details');
            }
        })
        .catch(err => {
            console.error('Error fetching fish details:', err);
        })
        .finally(() => {
            setIsLoading(false);
            console.log('loading ended')
        })

}, [fishId]);

组件视图代码 #

return (
        <ScrollView style={styles.container}>
            {isLoading ? (<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                <ActivityIndicator size="large" animating={true}/>
            </View>) : <View style={styles.content}> ....  </View>

原因分析 #

这个默认的"Loading..."文本大概率是React Native调试工具（如React Native Debugger、Expo DevTools）的内置加载占位提示，或是第三方脚手架/导航库的默认加载组件被触发。核心问题在于自定义加载组件的布局存在缺陷，导致它未出现在可视区域内，调试工具的默认提示因此补位显示。

解决建议 #

• 修复ScrollView布局：检查styles.container是否设置了flex: 1，确保ScrollView占满父容器。如果ScrollView未撑满屏幕，内部加载View的flex:1无法让ActivityIndicator居中，导致它不在可视范围内。
• 给ActivityIndicator添加颜色：默认颜色可能与背景色重合导致看不见，手动指定颜色属性，比如<ActivityIndicator size="large" animating={true} color="#2196F3"/>。
• 排查第三方库冲突：检查是否使用了导航库（如React Navigation）或状态管理库，部分库会在页面加载时自动显示加载提示，查看相关配置是否冲突。
• 临时移除ScrollView测试：把加载组件直接放在根View中，确认ActivityIndicator能否正常显示，排除ScrollView的布局问题。
• 关闭调试工具的自动提示：如果是调试工具导致的，可在其设置中关闭自动加载占位功能。

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