【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

案例

相关推荐
zepcjsj08012 小时前
简单实现支付密码的页面及输入效果
android
小阳睡不醒3 小时前
小白成长之路-部署Zabbix7(二)
android·运维
他们都不看好你,偏偏你最不争气3 小时前
iOS —— 天气预报仿写总结
ios
mmoyula5 小时前
【RK3568 PWM 子系统(SG90)驱动开发详解】
android·linux·驱动开发
ITfeib7 小时前
Flutter基础
flutter
你过来啊你7 小时前
Android用户鉴权实现方案深度分析
android·鉴权
RaidenLiu10 小时前
RepaintBoundary是什么?怎么用?
flutter
kerli10 小时前
Android 嵌套滑动设计思想
android·客户端
白玉cfc10 小时前
【iOS】网易云仿写
ui·ios·objective-c
恣艺10 小时前
LeetCode 854:相似度为 K 的字符串
android·算法·leetcode