【Android、IOS、Flutter、鸿蒙、ReactNative 】启动页

Android 设置启动页

自定义 splash.xml

通过themes.xml配置启动页背景图

IOS 设置启动页

LaunchScreen.storyboard 设置为启动页

storyboard页面绘制

Assets.xcassets 目录下导入图片 AppLogo

Flutter 设置启动页

Flutter Android 设置启动页

自定义 launch_background.xml 作为启动页面

  • drawable-v21 适配5.0及以上手机资源文件
  • drawable-v24 适配7.0及以上手机资源文件
  • drawable-v21 drawable-v24可共存
  • 两者只与手机的android版本有关,与targetSdkVersion无关

通过 styles.xml 设置启动图

通过 AndroidManifest.xml 配置 Activity 的主题样式:

Flutter IOS 设置启动页

用 xcode 打开 flutter 工程下面的 ios 文件夹

LaunchScreen.storyboard 设置为启动页

LaunchScreen.storyboard 页面绘制

Assets.xcassets 目录下导入图片 AppLogo

HonmonyOS(鸿蒙) 设置启动页

Dart 复制代码
@Entry
@Component
struct Index {
  @State message: string = 'HonmonyOS 设置启动页'

  build() {
    Stack() {
      Image($r('app.media.logo'))
        .width("192vp")
        .height("192vp")
        .offset({
          y: `0`
        })
        .objectFit(ImageFit.Contain)

      Text(this.message)
        .offset({
          y: '-35%'
        })
        .textAlign(TextAlign.Center)
        .fontSize(28.0)
        .backgroundColor(0xF5DEB3)

    }
    .backgroundColor(Color.Orange) //背景颜色
    .width('100%') // 宽度
    .height('100%') // 高度
  }
}

ReactNative Android 设置启动页

自定义 splash.xml 作为启动页面

通过 styles.xml 设置启动图

通过 AndroidManifest.xml 配置 android:theme 的主题样式:

ReactNative IOS 设置启动页

xcode 打开 ReactNative 工程下面的 ios 文件夹

LaunchScreen.storyboard 设置为启动页

LaunchScreen.storyboard 页面绘制

Images.xcassets 目录下导入图片 AppLogo

案例

相关推荐
2501_916008893 分钟前
全面介绍Fiddler、Wireshark、HttpWatch、SmartSniff和firebug抓包工具功能与使用
android·ios·小程序·https·uni-app·iphone·webview
玉梅小洋1 小时前
Windows 10 Android 构建配置指南
android·windows
不爱吃糖的程序媛1 小时前
Flutter 与 OpenHarmony 通信:Flutter Channel 使用指南
前端·javascript·flutter
Libraeking2 小时前
视觉篇:Canvas 自定义绘图与高级动画的华丽圆舞曲
android·经验分享·android jetpack
Fushize3 小时前
多模块架构下的依赖治理:如何避免 Gradle 依赖地狱
android·架构·kotlin
Jomurphys4 小时前
Kotlin - 类型别名 typealias
android·kotlin
Haha_bj4 小时前
Flutter ——flutter_screenutil 屏幕适配
android·ios
用户66116655296524 小时前
Futter3 仿抖音我的页面or用户详情页
flutter
Haha_bj4 小时前
Flutter ——device_info_plus详解
android·flutter·ios
前端小伙计4 小时前
Android/Flutter 项目统一构建配置最佳实践
android·flutter