React Native 启动画面

17 Mar 2025 | 阅读 2 分钟

启动画面是一个视图,包含在应用程序首次启动时显示的文本或图像。当移动应用程序在启动之前需要基本信息时,会使用它。 应用程序可能会从某些外部 API 或本地存储加载信息。

如果没有这些信息,应用程序可能无法显示用户界面。 例如,应用程序需要检查用户是否已授权并决定要显示的屏幕。

启动画面将在屏幕上自动隐藏几秒钟(3-5 秒),并在下次应用程序启动时显示。

启动画面示例

  1. 在你的项目中导入 Platform、StyleSheet、View、Text、Image、TouchableOpacity 和 Alert 组件。
  2. 在项目中创建 constructor() 并创建一个名为 isVisible 的布尔类型状态,并将其默认值设置为 true。 此状态用于显示和隐藏启动画面。
  3. 创建一个名为 Hide_Splash_Screen() 的函数。 它将状态值更改为 false。
  4. 在你的类中创建 componentDidMount() 方法。 这是一个内置方法,在应用程序完全加载后调用。 在同一方法中,我们可以使用 setTimeout() JavaScript 函数在给定时间后更改状态。

App.js

输出

React Native Splash Screen
下一个主题React Native vs. Ionic