End the first two instalments of Introduction (Vol.8 – React, “5 Minute Quick Start”) and Advancement (Vol.9 – Advancement! React), the one-month study of React is almost complete. Next, we move to the final stage of learning React Native.

This issue focuses on learning React Native, from the beginning to the project practice. I hope this issue will give you an overall understanding of the structure of React.

The React Native to fit

When it comes to getting started with a new technology, the official documentation is naturally the most detailed. However, most of the time, after reading the official documents, we still fall into various pits when using React Native. Therefore, we select the following articles to help you avoid these pits when using React Native.

ChanceKing – I’m dying to see the flowers React Native

I like React Native because it changes the traditional cognition of the front end and expands the dimension of the front end. Because it can not only play in the H5 realm, it can also encroach on the client side, because it enhances the presence of the front end and creates anticipation and excitement. In this article, THE author notes the pitfalls of building his first React Native project. If you’re ready to learn React Native, give it a try.

Guihai JamiE -React Native,React Native

React Native how to develop iOS apps? NPM install -g react-native cli and react-native init AwesomeProject Start by showing a poster, talk about simulated data, rendering, and getting online data through the interface and presenting it.

Chen Xuejia _6174 -React-native layout

Width units and pixel density, Flex layouts, image layouts, absolute and relative positioning, text elements… The detailed explanation and concise feature summary will help you easily navigate the React-Native layout.

Chen Xuejia _6174 -A blend of React-Native and React-Web

As for the practical application of React-Native, The official statement of Facebook is that React-Native provides common development mode for multiple platforms, rather than one code for multiple applications. To this end, the author also tries to explore the feasibility of sharing code with a practical example (a simple demo with SampleApp).

cnsnake11 – React Native Incremental upgrade solution

As soon as the app uses the new bundle and Assets folders, it completes an online upgrade when changing code or images. Based on the above ideas, this article tries to explain the incremental upgrade solution.

DesGemini – A first look at react Native SVG based on the React – Art library

On mobile, react-Art has become a ready-made solution for drawing graphics, considering the cross-platform requirements and the accumulation of technology on the Web side. React-art is also supported on iOS and Android platforms. Here, the author brings to you (world first? =_=) Getting started.

Quiet and elegant autumn water -React Native development Tips

It is believed that many people who write React Native are from the front end and tend to start from the front end when they encounter problems. However, due to the limitations of React Native, it does not support enough attributes and styles. Therefore, the author summarizes some problems that may be encountered in future development based on his own development practice. And give some small code reference, hope to help you.

DesGemini – React Native Wilderness Development Survival Guide

React Native’s development is booming, but its document update speed is far behind the development speed, making the engineering of React Native seem like a wilderness. The author has been developing the React Native App for a commercial project for nearly half a year, and has written his own experience of walking and climbing potholes. I hope this guide can help you.

React Native for Android

This chapter is selected from Dr. Hou’s “React Native Android Amway” series. The tutorial will introduce React Native more in combination with the Native Android. The project starts with building the React Native Android environment and goes further, learning with the tutorial. Proficient in the development of React-Native Android.

1. Build the React Native Android environment

Although there are a lot of articles on the construction of React-Native, most of them are about the construction of JS level, without combining the Native Android and its development. This article will briefly introduce how to use Android Studio and React Native to build a React base environment and successfully create a Hello World with it.

2. Create a simple RN application (from the JS perspective of RN)

Now that we’ve successfully created Hello World, we’ll explore how to create a slightly more complex interface with React Native and look at some of the React Native Android project directory structures.

4. Invoking Java code in RN using JS

Master 3. How to control the jump between native Android activities, we will learn the native knowledge, using JS to call. This way, you can develop React-native apps more efficiently

6. React Native base of React

A lot of knowledge about React-Native is about styles, low-level, environment, etc. Now let’s learn the basics of React. Js, our code, components we created, and other related knowledge.

8. Realization of mobile Baidu feed stream

After learning the above articles, you will have a basic grasp of the react-native style of writing and layout. In this section, we will do a hands-on example to imitate the mobile Baidu news stream and consolidate our React-native ability.

The project to share

ctriptech – React Native practice ctrip Moles framework

This sharing will introduce Ctrip’s practical dry products in React Native by sharing Moles framework, hoping to give you some inspiration and inspiration. The content includes three aspects:

  • What role does the Moles framework play in integrating React Native with our main App?

  • How does the framework get through Android, iOS, H5 and SEO to enable us to run a set of code on multiple platforms: Moles?

  • What are the components and principles of the Moles framework?

Quiet and elegant autumn water -Use React Native to create a circular loading bar

The general method of making progress bar can be drawn with Canvas or SVG. How to write a progress bar like this using React Native? Follow the author to try out the completion of the progress bar.

DesGemini – Node.js + React Native design: Development notes of agricultural Iot monitoring system

The iot monitoring system as a whole can be divided into three layers: database layer, server layer and client layer. In addition to the existing Oracle 11D database, a Redis database is added to the database layer. The server layer uses node.js Express framework as the API background of the client. In addition, Redux has been adopted to unify event distribution and UI data management for applications. React Native has a buff

Wang Tie hand -React-Native – Use JavaScript to write iOS apps

I wrote a Hybrid App, but I realized that it was not enough, and then I acted React Native on a whim. It is a very simple introduction. I wonder if you and the author want to go together.

(End of issue)

Portal to Weekly:

# SegmentFault Technology Weekly #

Tech Week is a weekly series of community-specific technical content. Weekly selects each content, is the author’s original opinion, trample pits summary and experience sharing.

Follow or subscribe every Tuesday. You can also leave comments on topics you are interested in and recommend excellent articles related to the topic.