The content of this article is for browsing only

As a qualified front end engineer, what technology is hot in 2019, I believe we have some understanding, think about it, in 2019 is already half:

How about node.js and the Vue and React frameworks?

Did you flip through the JavaScript Advanced Programming?

In fact, in the past two years the front-end of increasingly fierce competition, enterprises are more strict with front end position (now to find a job you will find that, the enterprise not only need a solid job applicants, and the mainstream technology stack and breadth has requirements), on the front, not to advance is to go back the sense of crisis and anxiety is heavier. At this time, as a member of the front end we must improve themselves, rich technology library, not to say in front of the lead, follow the trend run don’t be thrown away is the basis of whether you can still mix in this line.

Why react-native

Last year, there was a buzzword PWA. PWA (Progressive Web App) was a concept introduced by Google in 2016 and has been rapidly adopted in 2017. Significantly faster loading, can work offline, can be added to the home screen, full screen execution, push notification messages, and more. Many domestic companies have implemented PWA, such as Ele. me and Ali. PWA is implemented with the concept of hybrid APP development. In fact, the content of hybrid APP is still website content in essence, but it can be displayed on the APP, and it has better performance in caching, notification, background functions and so on. It can be understood as websites packaged as apps, and there will be more websites transforming to hybrid apps in 2019.

Front-end development Hybrid APP has the advantages of low development threshold and high development efficiency, and can be developed quickly for both platforms. Currently, there are many frameworks and platforms for developing hybrid front-end apps, among which React Native is a good one.

The advantages of the React – Native

1. Page loading speed: React-Native claims to be 99% close to native experience. It writes JS code and maps native to render the page, and the page rendering speed is similar to native. The H5, however, relies heavily on the phone’s hardware configuration. Ios support for H5 apps is ok, but android is not. Some high-end Android devices can run H5 apps fine, but most of them are a bit slow, especially in resource-intensive operations like loading images. The page rendering speed of H5 is significantly different from that of React-Native.

2. Model adaptation: For example, H5 is difficult to adapt to the current iPhone X bangs screen. And for many Android models H5 does not do a good fit.

3. Animation effect: THE animation of H5 is realized by CSS and JS, and it is relatively difficult to compare prices for some complex animations, which also consumes memory. React-native itself provides an API for animation implementation. In order to pursue the smoothness of animation too much, React-Native can also be implemented with the help of native, which encapsulates space for React-Native to use.

RN also has advantages over native:

1. Hot update: As anyone who does mobile development knows, Apple’s review process is a constant headache. For emergent business development, native has to wait for Apple’s review before it can be launched. In this case, React-Native shows its advantages. When native code is not touched, react-Native can directly update JS code to realize real-time release. React-native is a great way to quickly iterate and update online services.

2. Development efficiency: 20% of the react-native code is native code, and 80% of the code is REUSABLE JS code, which greatly shortens the development cycle and saves the development cost for the enterprise.

3. Low maintenance cost If the business only involves the modification of JS code, a React-Native engineer can maintain the original APP well and save the maintenance cost for the enterprise when there are few requirements for APP development. (Even though the engineer does not know how to develop the APP native at the beginning, after a long time of training, he can more or less learn how to do it.)

4. Low learning cost: React-Native enables front-end engineers to quickly participate in APP development, reducing learning cost.

5. Scalability: React-Native provides an API for customizable native controls that JS calls to render, which makes it extremely scalable.

Powerful background for Facebook’s “real son”

1. As the “son” of Facebook, React-Native relies on the tree to continuously improve this technology.

2.React-native itself is open source, so all source code is available. React-native has been attracting a lot of attention since its open source. React-native is the first project in history that has nearly 8 million stars on Github without an official version. Community component benefit library has also been relatively rich, community activity is relatively high. For a lot of complex components, we don’t have to reinvent the wheel.

Some problems encountered during development

1. Careful and careful study of documents can avoid many problems and detours (nonsense)

2. Keyboard occlusion problem

Solutions:

  1. Use react-Native KeyboardAvoidingView component wrap

Wrap content view all around KeyboardAvoidingView component:

  1. Wrap Content view with native Base Content component ===>> recommendation

    Content is a Content view component provided by Native Base, especially when used with the Container component.

3. GIF in Android environment does not have animation, and does not support GIF

Add it to the Dependencies field in Android /app/build.gradle.

The compile 'com. Facebook. Fresco ": the fresco" : 1.5.0' compile 'com. Facebook. Fresco ": animated - GIF: 1.5.0'Copy the code

Then react-native run-Android is ok.

4. Google Docs

Workaround: Add it in the androidmanifest.xml file

<activity
  ...
  android:screenOrientation="portrait"
  ....
</activity>
Copy the code

5. Load image resources in the App

Method 1: To use the URI, you must specify the size

<Image source={{uri: 'app_icon'}} style={{width: 200, height: 200}} />
Copy the code

Require (‘image! X ‘) syntax without specifying size

<Image source={require('image! app_icon')} style={styles.imageStyle} />Copy the code

6. When the Android keyboard pops up, the absolutely positioned component pops up with the keyboard

Workaround: Settings in androidmanifest.xml file

<activity
  ...
  android:windowSoftInputMode="stateAlwaysHidden|adjustPan">
  ....
</activity>
Copy the code

7. Disable StackNavigator Navigation Bar

WelcomePage: {screen: WelcomePage, navigationOptions: {header: Null, // StackNavigator Navigation Bar can be disabled by setting header to NULL,