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

Brief: This series of articles will be a comprehensive introduction to the Expo, I contact the Expo from June 2017 to rely on, the study of the Expo intermittent, all the way to nearly 10 months, nonsense not much 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"

Then we'll start the code.

Introduced

What is Expo? Expo is a set of tools, libraries, and services that allow you to write JavaScript to build native iOS and Android apps.

Go to QuickStart and start building!

Quick Start

Expo is a set of tools, libraries, and services that allow you to write JavaScript to build native iOS and Android apps.

Detailed Introduction

The Expo app is the react native application that contains the Expo SDK. The SDK is a NATIVE-AND-JS library that provides access to the device's system features (such as cameras, contacts, local storage, and other hardware). This means you don't need to use Xcode or Android Studio, and you don't need to write any native code, and it also makes your PURE-JS project very portable because it can run in any native environment that includes the Expo SDK.

The Expo also provides UI components to handle a variety of use cases, such as icons, blur views, and so on, that almost all applications will overwrite but not be baked into the react native core (not in the Expo has RN ).

Finally, the Expo SDK provides access to services that are often difficult to manage, but are required for almost all applications. One of the most popular is that expo can manage your assets for you, it can provide you with push notifications, and can build native binaries that can be deployed to the store.

Installation

You need to use two tools to develop the expo application-a desktop development tool and a mobile client to open your application.

Desktop Development tools: XDE

XDE represents the development environment of Expo. It is a standalone desktop application that contains all the dependencies you need to start.

Download the latest version of XDE for Macos,windows (64-bit) or Linux.

On Linux, use chmod a + x Xde *. Appimage and./xde*. Appimage Open.

Mobile Client Development tools: Expo (for iOS and Android)

The Expo client is like an application browser built with Expo. When you launch Xde in your project, it generates a unique development URL that you can access on your iOS or Android Expo client , whether on a real device or in a simulator.

Install on your device

You can download the Android version from the Play store or download the iOS version from the App Store (here you need FQ, and of course I have the downloaded version, not FQ can find me to teach you)

Required Android and iOS versions: Android version Expo supports the lowest Android 4.4, the lowest iOS version is iOS 9.0.

You do not need to manually install the expo client on the emulator/emulator because the XDE is automatically completed. See the next section of this guide.

iOS simulator

Install Xcode from the Apple App store. It will take some time to take a nap. Next, open Xcode, go to preferences and click the Components tab, and install an emulator from the list.

Once the emulator is open and you have a project open in Xde, you can press open on the Xde iOS emulator, which installs the Expo client to the simulator and opens your application in it.

What if it doesn't work? This is accidental, Xde automatically installs the Expo Client, usually due to subtle differences in your environment or in the Xcode toolchain. If you need to manually install the Expo Client on the emulator,

You can do this by following these steps:

• Download the latest simulator build.
• Extracts the archived content. You should get a directory like exponent-x.xx.x.
• Make sure the emulator is running.
• On the terminal, run Xcrun simctl install booted [fetch directory path].

Android simulator

Download the Genymotion (free version) and follow the Genymotion installation Guide. ( domestic small partners we can also use the night God simulator ) After installing Genymotion, create a virtual device-we recommend using the Nexus 5,android version for your decision. Start the virtual appliance when you are ready.

Once the emulator is open and you have a project open in Xde, you can press open project in XDE in the Expo project on Android, which will install the Expo client into the simulator and in which your application opens. If you encounter any problems, please follow our genymotion guide.

node. js

To get started with Expo, you don't necessarily need to install node. js, but as soon as you start to really build what you want. Download the latest version of node. js.

Keeper (Watchman)

If some MacOS users do not install it on their machine, they will encounter problems, so we recommend that you install Watchman. Watchman observes files and records as it changes, then triggers the appropriate action and is used internally by react native. Download and install Watchman.

XDE Usage Introduction (XDE Tour)
Sign-in screen (first open)

When you open Xde for the first time, you will be greeted by this login screen. If you already have an account, please continue to sign in. If you don't have an account, use GitHub to sign in or sign up for an account.
XDE Login Screen

Homescreen (Home screen)

Success, you are logged in! On this screen you may want to create a new project or open a new project. We have listed some of the most recently opened projects for ease of use.

XDE Home

Project dialog box (Project Dialog)

Click on the item and you will see everything you can do from here. Of course, you can't close an item or display it in a finder, etc., because you haven't opened a project yet.

Xde Project Dialog box

Exit (Sign Out)

You can always click on the user name in the upper right corner and exit. or logoff. Who can really agree with this statement?
Xde exit

Project Screen (Project screen)

So we started a new project. The left pane is React Packager, which you can learn more about in the up and running and Expo Expo. The right pane is used for device logs, and you can read more information in the View log.
Xde Project

Share ( Share)

Send a link to your application via an Internet connection to anyone. This is also useful for getting links on your device if you are not connected to your computer.
Xde Send Link

On the device, open ( Opening on a device )

The device button allows you to quickly open your application on a device or emulator. Read more in the start and run.
XDE Open on Device

Development mode ( Development Mode )

You often want to work with your project in development mode. This makes it run slower because it adds a lot of code to run-time validation to warn you of potential problems, but it also enables you to reload in real time, hot reload, remote debugging and Element Checker. If you want to test any performance-related content, disable development mode and reload your app. XDE project development model

Project dialog box (open Project) | | ( Project Dialog (with Project open) )

In addition to the options available on the home screen, after you open the project, we can also access some shortcuts, such as displaying the project directory in the Finder.
Open the XDE Project dialog box in the project

Publish ( Publish )

When you process your project, you are provided with a temporary URL that is provided through your computer. When you're ready to share a project with others, you can publish the project to get a permanent URL that anyone can open with the Expo client (similar to expo.io/@your-username/your-app-slug).

When you click the Publish button in Xde, you are asked to confirm that you want your project to be open to the public. Xde need some time to generate the reduced JS package and upload your resources to our server, once completed, print out the URL of your app's publication. You can read more about how to learn more in the Expo work and publish Guide.
XDE Release

The next one to continue the introduction, this article mainly introduces: What is the Expo, how to install Expo Clinet and xde,xde how to use! You are 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--what is the expo, how to install Expo Clinet and xde,xde how to use