React native iOS development steps and Crash collection

React Native's iOS development and crash collection

Introduction

React native enables you to build a world-class native app with a fully consistent development experience based on JavaScript and React .

React native focuses on improving the development efficiency of multi-platform development-learning only once and writing any platform. (Learn once, Write anywhere)

Facebook has already used react Native in a number of products and will continue to invest in building react Native.

Prepareinstallation

iOS can only be developed under Mac and requires Xcode; Android three platforms can be developed and need Android Studio.

Required Software

1.Homebrew

Homebrew , Mac System Package Manager for installing Nodejs and some other required tool software

In the max OS X 10.11(El Capitan) version, homebrew may encounter /usr/local directory-Writable permissions issues when installing software. You can use the following command to fix:

2.Node

use homebrew to install node. js.

3.ReactNative Command-line tool (REACT-NATIVE-CLI)

React Native command-line tools are used to perform tasks such as creating, initializing, updating projects, running packaged Services (Packager), and so on.

If you see EACCES:permission denied this permission error, then please refer to the above homebrew , repair /usr/local The ownership of the directory:

4.Xcode

react Native The current version requires xcode " Span style= "Color:rgb (72,72,72); Background-color:rgb (245,252,255) ">  7.0 or later. You can use the app Store or to apple developer official website download. This step installs both the Xcode IDE and the command-line tools for Xcode.

Note: Android needs to install the androidstudio tool

Validation

Generate a React-native project

Also generates related items for iOS and Android

Index.ios.js and Index.android.js are where JS scripts are written.

under iOS is the Xcode project, Android is the Gradle project

Switch to the project directory and run the iOS project

The effect is as follows:

How to develop

components are the cornerstone of react native applications, For example:

1.Image corresponds to ImageView under Uiimage,android under iOS

2.ActivityIndicatorIOS Progress Indicator for iOS: Uiactivityindicatorview

3.ToastAndroid hover notification box for Android: Toast

So how is the user interface (UI) of a typical RN application generated?

The first is to declare the components (as well as the nested components), and then the components are converted in order to correspond to the native UI components of the platform.

Core Components

Here are some of the core components commonly used in react native applications, which can be used either alone or in combination.

They are components that iOS and Android can share, including: Text Image View TextInput ListView

Summary : The writing of the interface here is similar to the WPF XAML file, the Android XML file.

XAML for WPF:

Android Interface layout file:

components related to each platform:

use react Native , you can use standard platform components, such as iOS Uitabbar or Android drawer, they cannot be used across platforms and can only be used individually. This makes your app Get the platform's consistent visuals and experience, and get the best performance and fluency. With the corresponding reactcomponent, you can easily integrate these native components into your react native applications, such as Tabbarios and drawerlayoutandroid. DrawerLayoutAnd Roid Encapsulates the platform drawerlayout (Android only) react components.

Native UI Components

React Native Most of the most common components have been encapsulated, such as ScrollView and the TextInput , but it is not possible to encapsulate all components. These words need to be used in our own packaging.

Native Module

Sometimes the app needs to access the Platform API, but react native may not have a corresponding module package, or you need to reuse objective-c, Swift, or C + + code instead of using JavaScript again, or you need to implement some high-performance, Multithreaded code, pedagogical gardening, database, or various advanced extensions and so on.

We designed react native to be able to write real native code based on it, and to access all the capabilities of the platform. This is a relatively advanced feature and we do not think it should be common in the daily development process, but it is important to have this capability. If react native does not yet support a native feature that you need, you should be able to encapsulate the feature yourself.

Create an app

Switch to a directory and execute it at the command line:

React-native Init sampleappmovies

1.ui related to the basic in JS, there are ready-made react components are ready to use, including with the Ios,android platform-related components;

2. Logic code can be implemented in JS, JS writing, if some platform-related functions react native not implemented, then the development of native modules, call each other

Summary

1.ios and Android do have a lot of code that can be generalized

2.ios and Android code are not completely generic, and there may be a need to maintain two sets, or make some judgments within the code. Not the online people say, write once code, multi-purpose, especially when the actual development, or need to understand the underlying principle, the development of their own components with the original bridge

but with " Learn once, Writeanywhere "The idea is consistent, React native not forcing a copy of the native code to support multiple platforms, so do not mention" Write once, run Anywhere "(Java).

3. A more obvious usage scenario: Hot Update

Principle: To realize the hot update of the script of Rn, we need to understand how RN is going to load the script.
In writing the business logic, we will have a lot of JS files, when packaging the RN will be packaged into a file called Index.android.bundle (iOS is index.ios.bundle) files, all the JS code (including the RN source code, Third-party libraries, code for business logic) in this file, the first time the app is launched, the bundle file is loaded, so what the script hot update does is replace the bundle file.

Crash Collection

1. Native code written in the Xcode project can be used to directly use the iOS crash collection mechanism, such as the three-party SDK: Cloud capture

2.js code, the crash collection mechanism is as follows, the development of a separate SDK can

Reference Address:

React Native Chinese web

React native iOS development steps and Crash collection