Expo Big Battle (10) errorhandling error handling in Assets,expo in app Icon,expo in--expo

Source: Internet
Author: User
Tags log log amazon cloudfront home screen

Brief: This series of articles will be a comprehensive introduction to the Expo, I contact the Expo since June 2017, the study of the Expo intermittent, all the way to nearly 10 months, nonsense not to say, next you see the content, speak all to the official website

I guess go all machine turn + personal modification supplement +demo test form, to the expo to do a big blood! Welcome to join the Expo Interest Learning Exchange Group: 597732981

"Before I wrote some columns about Expo and RN entry configuration for East I west, you can click here to view: from zero learning RN development"

Related articles:

Expo Big Battle (a)--what is the expo, how to install Expo Clinet and xde,xde how to use

Expo Big Battle (ii)--expo life cycle, Expo Community exchanges, Expo learning necessary resources, the development of the use of the expo concerns some issues

Expo Big Battle (iii)--to the development of react native project developers have targeted the introduction of the limitations of Expo,expo, the development of project selection points of attention, etc.

Expo Big Battle (Iv.)--Rapid use of Expo to build a key term in a App,expo

Expo Big Battle (v) configuration information for App.json files in--expo

Expo Big Battle (vi)--EXPO Development mode, Expo in the EXP Command line tool, Expo How to view the debug mode in the log Log,expo

Expo Big Battle (vii)--expo How to use Genymotion simulator

Expo Big Battle (eight)--expo in the Publish and Expo link, to link this piece of things not detailed see, we can come to communicate with me

More >>

Then we'll start the code.

Guide

These guides cover specific goals or functions that you might want to implement in the Expo project. For example, many people want to load a custom font other than the font that came with the device, or send a push notification to the user. Read the Guide to suit your needs.

App icon


Your app icon is the icon that users see on their device's home screen and in the App Store and Play store. This is a very important topic for platform differences and may be very demanding. This guide details how to make sure your app icon looks as good as possible on all devices.

Configure the icon for your application

The most straightforward way to provide icons for your application is to provide an icon key in App.json. If you want to be as minimal as possible, then this key is enough. However, the Expo also accepts platform-specific keys under Ios.icon and Android.icon. If any of them exist, they will take precedence over the basic icon keys on their respective platforms. Most product quality applications may offer something slightly different between iOS and Android.

Icon Best Practices

iOS version
The icons you use for iOS should follow the Apple HMI guidelines for iOS icons.

    • Use a PNG file.
    • The 1024x1024 is a very good size. Expo Construction Services will generate additional dimensions for you. The maximum size it generates is 1024x1024.
    • The icon must be completely square, i.e. the 1023x1024 icon is invalid.
    • Make sure the icon fills the entire square with no rounded corners or other transparent pixels. When appropriate, the operating system will mask your icons.

Android's
Unlike iOS, the operating system does not mask your icon to any particular shape. Therefore, you may want to use transparency to provide a shape other than a square.

    • Use a PNG file.
    • You may still want to follow some of Apple's best practices to make sure your icons look professional, such as testing your icons on different wallpapers, and avoiding text other than the product's text tags.
    • Provide at least 512x512 pixels of something. Since you already need 1024x1024 on iOS, there's no harm in providing it here.
Expo Client and Network (Expo client and web)

If your application contains privacy: It is exposed in App.json, it will be displayed in your Expo.io configuration file. In this case, we'll cover up our icons to get rounded corners, so if it looks reasonable on iOS, it might look good here too.

Assets (Assets)


Images, fonts, videos, sounds, any other files your app relies on are not JavaScript, but are considered an asset. Just like on the web, assets can be acquired or streamed on demand via HTTP. This differs from a typical mobile application in that the asset is bundled with the application binaries.

However, the Expo has a difference between the resources you use and the syntax you need, because they are available on the local file system, for example: <image Source = {require ('./assets/images/example.png ')}/> and the Web page picture that you refer to through the URL, for example: <image Source = {{uri: ' Http://yourwebsite.com/logo.png '}}/>. Because we do not manage these assets, we cannot guarantee the availability of images that you reference using a Web URI. In addition, we do not have the same amount of information about any Web URI: When your asset is available on the local file system, the packager is able to read some metadata (such as width, height) and pass it to your application, so you don't actually need to specify the width and height, for example. when specifying a remote URL, you need to specify the width and height explicitly, otherwise the default is 0x0. Finally, as you'll see later, the caching behavior is different in both cases.

The following is an explanation of the previous category of assets: the assets you have in the file system when you build them. In the latter case, assume that you are familiar with how to upload a picture to any page on a Web page or to a mobile application where it can be accessed.

Where the asset lives (where assets live) in Development (In development)

When the local copy of the project is processed, the resources are provided from the local file system and integrated with the JavaScript module system. So if I want to include an image, I can require it, and we can do this if it's JavaScript code:require ('./Assets/images/example.png '). The only difference here is that we need to specify an extension-no extension, and the module system will consider it a JavaScript file . This statement evaluates an object at compile time that contains metadata about the asset that can be used by the Image component to get and render it: <image Source = {require ('./assets/images/example.png ')}/>

In production (in production)

Every time you publish your app, Expo will upload your assets to Amazon CloudFront, a very fast CDN. It does this intelligently to ensure that your deployment remains fast: if the asset has not changed since the last deployment, it will be skipped. You do not have to do anything to work, it is all automatically processed by the Expo.

Performance (performance)

Some assets are too important to start your application (Some assets is too important to start your app without). Fonts usually fall into this category. On the Web, font loading issues are known through several acronyms:Fout,foit and Foft, which represent flash with no style text, flash for invisible text, and Flash for false text (read more here). The default behavior of the icon font-driven icon-font-powered@ expo/vector-icons icon is foit on the first load, and the font will be automatically cached upon subsequent loading. users have a higher requirement for mobile devices than the network , so you may want to advance further by preloading and caching fonts and important images on the initial load screen.

Error handling

This guide details some of the policies that you can use to report and recover from project errors.

Handling Fatal JS errors (handling Fatal JS Errors)

If your application encounters a fatal JS error, the Expo reports errors differently depending on whether your application is in a development or production state.

In development: If you service your application from XDE or exp, a fatal JS error will be reported to react Native RedBox, and no other action will be taken.

in production (in Production): If you publish an application that encounters a fatal JS error, the Expo will reload your application immediately. If the error occurs very quickly after reloading, the expo displays a generic error screen with a button to try a manual reload.

Expo can also report custom information to you after you reload the application. If you use Errorrecovery.setrecoveryprops, and the application encounters a fatal JS error later, the contents of the method call will be passed back to your app's initial prop when reloading. See Expo.errorrecovery.

Tracking JS Errors

We recommend using Sentry to track JS errors in production.

How about a native error? (What's about Native Errors)

Because the local code of the expo will never change your project, the native symbols (the native symbols) are not particularly meaningful (they will show you the tracking of the react native core or the Expo Local SDK). In most cases *,JS error is what you care about .

However, if you really want a local crash log and deploy your app as a standalone app, you can configure your custom fabric key for Android. See Configuring with App.json.

For iOS, we're not going to expose a way for you to see the native crash log from the Expo app. This is because we don't build iOS native code on demand, which will require debugging symbols to be uploaded to fabric (or similar services).

* In some cases, writing bad JS may cause native code to crash. Typically, these are places where performance is unacceptable, such as adding local authentication to your code. React is part of the native bridge, which converts the JS object to a typed native value. If you encounter a native fault that can be interpreted, double-check that your parameter type is correct.

The next one to continue the introduction, this article mainly introduces: Expo app Icon,expo in the Assets,expo in the errorhandling error handling, welcome to pay attention to my public number, this article is approved by everyone, my measure is the public

The number of fans grew. Welcome to reprint, but must keep my blog link!

Expo Big Battle (10) errorhandling error handling in Assets,expo in app Icon,expo in--expo

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.