如何用Expo和React Native设计启动画面

rAc

201人浏览 · 2022-08-15 03:30:10

rAc · 2022-08-15 03:30:10 发布

即使是最小的细节对应用程序的成功也很重要。

什么是启动画面

您制作了一个很棒的应用程序,当然,为什么不正确地发布它呢?但是,如果你打开你的 expo 应用程序并看到 Expo 提供的默认无聊启动画面,你......“等等,首先什么是启动画面?”

看到上面的图片,你可能已经知道我在说什么了。

基本上,当我们启动一个应用程序时,它需要一些时间来运行或加载字体/资产,并且该应用程序不会立即可用。因此,启动屏幕基本上是用户在应用程序处于加载状态时看到的屏幕。

设备尺寸如何?

没问题,世博会为我们提供保障。对于 iOS 设备,我们可以选择 1242 像素宽和 2436 像素高——这是 iPhone 8 Plus(最宽的 iPhone)的宽度和 iPhone X(最高的 iPhone)的高度。但就 Android 而言,屏幕尺寸因市场上种类繁多的设备而有很大差异。解决此问题的一种策略是查看最常见的分辨率并围绕它进行设计 -您可以在此处查看设备列表及其分辨率。你可以看到expo doc我复制了上面的信息😁😁

配置启动画面

您可以在 app.json 文件中配置您的启动画面,并阅读以下博览会指南中的所有属性:

1.splash.image(注意:启动画面图像有没有背景)

2.splash.backgroundColor

3.splash.resizeMode

图标

当您发布应用程序时,应用程序图标就是人们在 App Store/Play 商店以及用户主屏幕上看到的内容。

图标大小

按照 Expo 的建议,我们可以在 Android 和 iOS 设备上使用 1024x1024。还要确保图标必须完全是正方形,即 1023x1024 图标无效。

为Android配置图标

在 Android 中,除了在 app.json 中指定图标之外,我们还需要做一些额外的配置。您可以在此处详细了解所有这些设置以及我们需要它们的原因。基本上,您需要提供 2 个单独的层:

android.adaptiveIcon.foregroundImage(一般为assets/adaptive-icon.png)
android.adaptiveIcon.backgroundImage

![](data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27345%27%20height=%2769%27/%3e)

再次,在此处阅读有关这 2 层的更多信息。

创建图标和启动画面

我将向WhatsApp-Clone Project添加图标和闪屏。对于创建图标,您可以使用“Canva”、“AdobeXD”等。但我使用Figma 模板创建了它,如世博会文档中所述。如果您想知道如何创建图标,请参阅这个视频。但下面👇是我用 Figma 创建的图标。

![](data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27200%27%20height=%27288%27/%3e)

请参阅上面我创建的图标 ☝☝inFigma。另外,如果你不想去 Figma,在这里下载图标。

替换文件并查看整个 App.json 文件

下载资产后,只需转到您的项目assets文件夹并替换我突出显示的 3 个文件。您下载的文件将自动命名为其特定名称,所以不用担心!如果需要,请删除旧文件。您也可以删除assets/favicon.png文件,因为该文件用于网络,而我们的应用程序不适用于网络。

![](data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27700%27%20height=%27335%27/%3e)

👇 下面是整个 App.json 文件,其中包含上述所有配置:

{
  "expo": {
    "name": "Whatsapp Clone",
    "slug": "Whatsapp-Clone-React-Native",
    "platforms": ["ios", "android"], 
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      }
    }
  }
}

最终输出

![](data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27290%27%20height=%27600%27/%3e)

所以,简单吧!...这就是您可以轻松地将图标和启动画面添加到您的应用程序的方式。希望你喜欢这篇文章。直到下一次。

注意安全;保持健康

谢谢

首次发布这里

React

React社区为您提供最前沿的新闻资讯和知识内容

更多推荐

SSR、ISR、CSR、SSG有什么区别

简介 SSR、ISR、CSR 和 SSG 被称为渲染模式,因为它们是 Web 应用程序相互渲染的不同方式。在本文中,我们将详细研究它们中的每一个,并讨论使用它们的 Web 技术/框架的类型。企业社会责任 CSR 代表客户端渲染。这是一个将页面加载到客户端浏览器而不是服务器上的过程。 CSR 是一种呈现模式,其中浏览器向服务器发送请求,服务器通过发送一个空的 HTML 页面进行响应,其中仅包含对

React

React 中具有“显示更多/更少”功能的代码列表项

我想在我的页面上显示一个元素列表,并且我希望每个元素都具有“显示更多/更少”功能来随意扩展和缩短文本。为此,我将使用 React。我将从以下虚拟 API 获取一些假数据 u003d>jsonplaceholder.typicode.com 我将使用axios这样做。我的结构中将包含三个页面:App.js、Texts.js 和 Text.js。你可以在这里找到 repo u003d>githu

React

React::Angular

苹果与橙子 Angular vs. React:比较苹果和橘子有人说比较 React 和 Angular 就像比较_苹果和橘子_。一个是处理视图的库,另一个是_完整的框架_。反应 React 由 Facebook 开发和维护,并用于他们的产品,包括 Instagram 和 WhatsApp。它自 2013 年以来已经存在了大约,所以它并不是全新的。它也是 GitHub 上最受欢迎的项目之一,

React

所有评论(0)

查看更多评论

rAc

@coc_devpress_16

已为社区贡献29247条内容