如何解决expo-app-loading已弃用，改用expo-splash-screen的警告？

步骤1：安装expo-splash-screen（如果未安装） #

如果你的项目里还没有安装expo-splash-screen，先执行安装命令：

npx expo install expo-splash-screen

步骤2：修改代码替换弃用的AppLoading #

下面是适配你原有逻辑的完整修改代码：

import React from 'react'
import { ActivityIndicator, ScrollView } from 'react-native'
import EStyleSheet from 'react-native-extended-stylesheet'
import * as Sentry from 'sentry-expo'
// 移除expo-app-loading导入，添加splash-screen导入
import * as SplashScreen from 'expo-splash-screen'

import { Navigator } from './navigator'

const styles = EStyleSheet.create({
  scrollView: {
    flexGrow: 1,
    justifyContent: 'center',
    padding: '20rem',
  },
})

class Test extends React.Component {
  state = {
    loading: true,
  }

  componentDidMount() {
    this.initApp()
  }

  // 整合原来的初始化、错误处理、完成逻辑
  initApp = async () => {
    try {
      // 阻止闪屏自动隐藏
      await SplashScreen.preventAutoHideAsync()
      // 执行你原来startAsync里的初始化任务
      await Promise.all([ /* 你的初始化任务数组 */ ])
      // 初始化完成后更新状态，再隐藏闪屏
      this.setState({ loading: false }, async () => {
        await SplashScreen.hideAsync()
      })
    } catch (error) {
      // 捕获错误并上报到Sentry
      Sentry.captureException(error)
      // 即使出错也要隐藏闪屏，避免卡屏
      await SplashScreen.hideAsync()
    }
  }

  render = () => {
    if (this.state.loading) {
      return (
        <ScrollView contentContainerStyle={styles.scrollView}>
          <ActivityIndicator size="large" />
          {/* 移除AppLoading组件，不再需要 */}
        </ScrollView>
      )
    }
    return <Navigator />
  }
}

export { Test }

关键改动说明 #

• 移除expo-app-loading导入，替换为expo-splash-screen的API调用
• 在组件挂载时启动初始化流程，先调用SplashScreen.preventAutoHideAsync()阻止闪屏自动消失
• 把原来startAsync中的初始化任务整合到initApp函数，统一处理成功和错误分支
• 初始化完成后先更新组件状态，再调用SplashScreen.hideAsync()隐藏闪屏
• 删除渲染中的AppLoading组件，改为通过API控制闪屏生命周期

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