I am an iOS developer, because the work needs, contact the React Native to now there are more than a year, I found very much knowledge resource in the network, but can let a person be suddenly enlightened, rapidly learning or a few, I sort out these papers for beginners is a good, hope that through my study route, React Native is a great tool for iOS developers who want to learn React Native.

Since it is written for iOS developers, I assume that you already have the basic knowledge of iOS native app development, so I will not explain the relevant content of iOS native app development.

In fact, as a developer, it is particularly important to have a learning atmosphere and a communication circle. This is my iOS communication group 659170228, no matter whether it is small white or big bull, we are welcome to enter and grow up together!

React Native

Noun explanation

Let’s start with a few key words:

  • React

  • Native

  • React Native

These three words don’t really have much to do with each other, so let’s take them one by one:

  • React: A development framework in the Web front-end field is very popular in recent years. The core idea is to componentize the view and render the component by updating the state of the component.

  • Native: This word is very literal, it means Native. A few years ago there was a very popular cross-platform development framework PhoneGap (now called Cordova) that wasn’t native. Native development is done using platform-specific languages and frameworks, such as iOS apps developed using Objective-C or Swift.

  • React Native: Combining these two words, we can conclude simply: Use the React framework for native-style development.

Realize the principle of

We all know that On iOS, Apple provides a JavaScriptCore framework that can parse JavaScript language. React Native is defined by multiple encapsulation. The end result is classes and methods that call Objective-C in the JavaScript language. We don’t have to go into the details of this right now, but we’ll get to that later in the course.

So since you call objective-C classes and methods, the performance is certainly not bad (but not perfect), so React Native has an advantage over other cross-platform development methods.

evaluation

  • Cross-platform: React Native officially supports iOS and Android mobile devices. There are also some popular adaptations for macOS, tvOS, and even UWP. However, due to the different features of different platforms, one code cannot be directly run on all platforms. The idea of React Native is to “Learn once, write anywhere”. We need to write different codes according to the characteristics of different platforms, and try to maintain high reusability of components.

  • Performance: The official claim is that the performance is comparable to Native. In practice, we will find several problems, such as too many layers of views rendered by complex views, ListView (equivalent to UITableView on iOS) has no reuse mechanism, and some components have memory leaks. This can lead to poor performance on some low-end Android models, with complex, large applications having significant performance issues.

  • Hot update: Due to the efficiency of App Store release iteration, hot update has become a highly desired feature of iOS platform. Fortunately, React Native has excellent hot update capability. By deploying JavaScript code to the server, the entire interface can be reloaded during running.

  • Learning cost: For iOS developers, a fair amount of Web front-end development knowledge is required to develop, while for Web front-end developers, native performance tuning requires native development knowledge and experience, so the learning cost is slightly higher.

  • Development efficiency: Android and iOS platforms can reuse many components, only part of the code needs to be maintained separately, so it is much more efficient than developing native apps for both platforms. Add to that the ability to dynamically render, Command⌘+R allows to re-render the interface without having to recompile, and the development efficiency is surprisingly fast.

Learning path

Set up the environment

The React Native package manager uses both Node and Watchman, and uses Facebook’s Flow as a type-checking library, so we’ll use Homebrew to install dependencies on macOS.

Install Xcode or Android Studio development environments for different platforms

Create a new application

Create a template project using the React Native command line tool

Run the application as prompted by the success of the project creation

== If an error occurs, try re-running NPM install and NPM start== in the project directory

Configure deployment on iOS devices

Log in to the developer account -> register the iOS device UUID -> configure the React Native file address in appdelegate. m

Explore sample code

Explore the default project code generated by the command line tool

Add the component

Module import

During development, we need to import every component or module we need

View style component

    If you’re familiar with a structured markup language like HTML, this code is not hard to understand and expresses the structure of the components in the view

    React Native uses style objects instead of traditional stylesheets for all styles, often using StyleSheet libraries to create component styles.

    We think the small preparation is good, you can point to a wave of collection with attention! You can also join my iOS communication group 659170228 to learn and grow together, no matter small or big!