Hollo everyone, today we'll talk about such a thing as RN
Let's see what it is, how it works and how to work with it, let's start
So what it is, this is a framework for developing cross-platform application using js and React, at the output we get a fully native application in Java and Objective C, Released in 2015 by the Facebook Company, React based, under the hood does not use webView and HTML technology, used js Api on top of native components
We said that the output is a fully native application, but how? RN uses 2 important streams. The main stream -It Handles the display of elements and user gestures. JavaScript stream - it executes JavaScript code in a separate engine, defines, HOW the application works.
But how do they cooperate? On the slide you can see the outline. For communication between the two streams is responsible Bridge - core React Native. The bridge resolves requests and incoming data from two streams. This allows them to communicate asynchronously, as a result stable work.
Let's start creating our first application, Facebook offers us 2 methods to start development Expo and RN Cli
Expo - a set of tools, libraries and services. Download the expo-client application on your phone, connect from the PC to the same network and begin development. The application is updated quickly anytime, for the all team
If you have already developed mobile applications, you can use CLI. To start you need long customizable Xcode or Android studio but unlike expo, you can add native modules, It is important that you can develop android applications only on Windows or Linux, and IOS applications only on MAC OS
At the slide you can see advantages and disadvantages of two methods. Pay attention to the paving weight of the expo 25 megabytes, СLI 5, unlike CLI, with expo you and other people can open a project while working on it, and unlike expo , with CLI you can add native modules. If you think about a real project, choose CLI, because adding native modules and the weight of the application plays a big role, if you just need to try what RN is, choose expo
What do we have? As said before, there are no HTML elements, but there are 2 types of components, cross-platform (such as Text, View) and platform-oriented(such as DatePickerAndroid DatePickerIos)
On the slide we see an easy transition from the web, div it is View, span it is Text, img it is Image
Here is our first app. We have a component class from the box, which has a "render" method, with its help the Visual part is drawn, View is a block, Text is a line element, each element contains a style attribute, which is responsible for StyleSheet object, What kind of object
This is an object created from the StyleSheet module using the create method, a generally simplified css model. The name of the objects is just like classes, and the fields of objects that use camelcase are styles
The application will look the same on all platforms
There are 2 ways to split code across platforms using the Platform Module, using platform specific file extension
Using the Platform module and its OS method, depending on the platform, select the height
second image For large changes, the select method, which, according to the platform key, returns a set of some properties first image Using the select method you can make cross-platform components.
We share all of the code on the 2 files with different extensions, and importing,and RN will select the desired file
What about navigation, out of the box we have React-navigation, This solution cross-platform, has Native UI for each platform, you don’t have to worry about smooth transitions... and basic types of transitions like createStackNavigator
There is a creacteAppContainer which contains 2 stacks, each has its own set of screens
These 2 screens, everything is simple, the same Hello World
there are two ways, Automatic linking, just writing a command in the console, but it doesn’t always work, the second way is manual linking, usually there are instructions, if not, you need to figure it out yourself
What in total? Cross platform, fast and cheep, front-end developers can easily start making applications knowing the react, you don't need the costs of objective C and java developers, A wide choice of available components and solutions, Convenient transition from react to react-native (one ecosystem)