• This article is Marno original, reprint must retain source!
  • The public account [aMarno], after concern, reply RN to join the exchange group
  • React Nativewww.marno.cn

It is recommended to download the materials before reading this article.Demo code and material download

directory

  • One, foreword
  • Answer some questions
    • 1. Why write this tutorial
    • 2. For whom is this article suitable
    • 3. How to use this tutorial
    • 4. Need to learn JavaScript, HTML, CSS first
    • 5. How to write a Demo
    • 6. Do you guarantee the learning effect
  • Iii. Stage I acquaintance (estimated time: 9.5~14.5 days)
    • 1. Content introduction
    • 2. Environment construction (estimated time: 1~2 days)
    • 3.Hello World (estimated duration: 0.5 days)
    • 4. Understand the index. The android/ios. Js
    • 5.Flex Layout (Estimated time: 2-3 days)
    • 6. Network Fetch (estimated time: 2~3 days)
    • 7. Use of tripartite library (estimated time: 2~3 days)
    • 8. Scroll view (2~3 days)
    • 9. To summarize

One, foreword

From the beginning of contacting React Native (RN for short) to writing the first blog post, I haven’t written any related articles. With the official release of wechat applet, a concept has been pushed to the public once again, that is, the full-stack front-end. What is this concept? One person can write Android,iOS, and Web applications at the same time. There may be some folk gods Java, OC, Swift, JS are particularly good, but I believe that most people are just like me, after graduation, only engaged in one direction of development, so it is relatively difficult to become a full-stack front-end. But with the issue of RNS, it seemed possible. This is also the inevitable trend of development as social progress continues to demand the improvement of productivity. The idea predates RN, but the fact that it’s catching on at this point in time suggests it’s time. Like fingerprint recognition on mobile phones, Apple wasn’t the first to integrate it into mobile phones, but it was at the right time. Now you can fingerprint a phone worth hundreds of yuan. So it doesn’t matter if you didn’t pay attention to learning RN last year, but with the release of wechat mini program, this once again shows that the full stack front end is a trend, if you haven’t taken the opportunity to get on the bus, then… That is actually nothing, a mind to write good Android is actually possible, after all, expertise is also to have! It’s a bit alarmist, but hopefully those who have the ability to learn, love and care about front-end development will get on the train soon. There are a lot of issues with RN right now, including performance at the top of the list, but as releases continue to iterate, I believe this will be resolved sooner or later. When was that, you ask? RN is now 0.40, will it be 1.0? Haha ~ who knows, but it will happen in my lifetime! With that said, let’s get the ball rolling!

Answer some questions

  • Why write this tutorial

    First of all, due to our company’s business development requirements, and I am very interested in RN development, because it can really improve productivity, so the company assigned me to be responsible for the implementation of RN in the company’s mobile terminal. Secondly, ALTHOUGH there are a lot of materials about RN on the Internet, there is no systematic learning plan. Watching video courses is inefficient, which also causes me to waste a lot of time to collect information in the process of learning RN. So I want to write an article to record my learning process and share with you my experience of starting from scratch. The purpose is to enable more people who want to study RN to quickly start learning without wasting time on collecting information.

  • For whom is this article suitable?

    1. Love front-end development and always want to develop something visible. 2. You may not understand Web development, but some Android or IOS development experience is preferred. 4. Newbies who don’t know anything about RN (if you’re an old RN driver who happened to read this, I’d like to say… Brother, take students? I’m a boner, I’m a coder… The elder brother… Aye… Don’t go… I’m still on my knees!

  • How do I use this tutorial?

    Look! Keep looking! Over and over again! Knock! Much knock! Knock over and over again! Seriously, I have to look at the code in the Demo. In addition, I will attach the mind map file I sorted out in the learning process, which can be combined with the article to read, so that the thinking of learning will be clearer.

  • Need to learn JavaScript, HTML, CSS first?

    HTML and CSS are not required. A little knowledge is enough, but not enough. But JS still needs to know a little bit (oh my God, what is a little bit? As elusive as salt in a recipe). All right, let me be more specific. A week’s reading of Ruan Yifeng’s introduction to ECMAScript 6 is enough. As for some of the other features involved in JS, closures and so on, the following entry can also be studied. Including ES7’s changes to the way network requests are written, we can also ignore them for now.

  • How to Write a Demo

    Do we need to create a new project by using the “react-native init XXXX” method for each knowledge point? Of course not, we can put all the code in a demo and manage it by subcontracting (app folders are created by ourselves and named by ourselves), which makes it easier to look at ourselves. Each demo is then imported into the index.android/ios.js file for use.

  • Do you guarantee the learning effect?

    Why don’t you ask me if I can get a job?

Iii. Stage I acquaintance (estimated time: 9.5~14.5 days)

1. Content introduction

1.1) This tutorial is divided into three stages. The first stage is to get you started and familiarize yourself with some basic RN components, JS syntax, and so on. At the end of this stage, I can basically build an App framework, and even write some simple news apps. In the tutorial of this stage, I copied [Open Eyes V3.1.2]. 1.2) A lot of content in this article comes from various blogs, so out of respect for the author of the original text, I will directly give the original text link and attach the author’s name, if you see the corresponding chapter, please jump to the corresponding website to have a look. At present, there are too many articles about RN on the Internet, but the results are often not easy to form a system, so I only sorted out some necessary content, and the relevant content I recommend these articles is basically enough. 1.3) Before starting the first stage of learning, let’s have a look at what effect we can probably make after completing this stage of learning. I hope I can also give you some motivation to study! Image above (too compressed, ok)!

2. Environment construction (estimated time: 1~2 days)

Follow the guidance of the RN Chinese community. However, there will be some potholes along the way. I also attached my record of potholes. I recommend that you look at the pit log first and then start installing the environment.

2.1) React Native: Learn With Android React Native 2.2) Environment construction Chinese tutorial, click jump RN Chinese community 2.3) Development tool installation and configuration:

This article uses WebStorm for development, some use Atom or Sublime, and TO that I say: Switch to WebStrom. In order not to involve in what unnecessary problems, I will not paste the download address, their own broken * solution. The best I can say is that I use the following version.

After installing WebStorm, we need to install some plug-ins and perform some common configurations to make it easier to develop. For example, the RN component library installation, adding some common Live Templates, etc. The following is the two common Templates I added for your reference. As for how to add Live Templates, you can search for them by yourself. React Native remove yellow warnings from WebStorm — Yu Lianlin 520WCF

Configure the Live Templates

3.Hello World (estimated duration: 0.5 days)

Writing Hello World is not a good tutorial! Be careful! Ha! Otherwise it will be very pit!

import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';

class HelloWorldApp extends Component {
  render() {
    return (
      <Text>Hello World!</Text>); }}// Note that the 'HelloWorldApp' in quotes must match the name of the project you created when init
AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);Copy the code

4. Understand the index. The android/ios. Js

Index.android. js and index.ios.js serve as the entry point for starting applications on Android phones and ios phones respectively, so let’s take a look at the structure of this file.

1) component import area: all of the components used to import in advance, including the style also need to import 2) core code area: all the logic code 3) component style area: render () method is used in the style of the component, can focus on writing 4) registered here start components: components can run only after registration. The AppRegistry used here also needs to be imported in the component import area

5.Flex Layout (Estimated time: 2-3 days)

Flex layout is an essential skill for Web development, and if you are a Web developer, you can skip this section. But it’s also important to note that some properties on the Web don’t exist in RN, and property names are named by small humps. I’ll include my own summary of properties supported by RN components below. It may not be perfect, but it should be there. If you’re not familiar with Flex layouts, don’t look at the rest, so spend a lot of time here, or even find some more challenging ones to practice on yourself.

  • Flex Layout Tutorial: Syntax by Yifeng Ruan
  • Flex Layout Tutorial: Examples by Yifeng Ruan
  • React-native methods for basic control properties
  • I also organized an Excel sheet, which is convenient for quick reference when used
  • The demo code is here, and if you’ve downloaded my entire HelloRN project, it’s in app/01_flex_demo

6. Network Fetch (estimated time: 2~3 days)

1. If you are already familiar with Flex layout practice, let’s look at network requests. In fact, most of the current APPS are relatively simple, nothing more than the display of layout, network data acquisition and so on. If we get these two things right, we’ll at least get some sense of accomplishment from studying in RN, and we’ll be motivated to continue. 2. It should be explained here that if you are an Android or iOS engineer, you need to get used to the way RN handles Json data (or the way Web handles Json). The Json Object data we request back through the network can be operated directly, unlike Native development. What additional tools are needed to convert Json? This is where Web development comes in handy. Json Object to Json string, Json string to Json Object, is very convenient. If you have to store network data locally, it is also convenient to destruct the assignment and assign it directly to the Model you created.

  • Why use Fetch traditional Ajax is Dead, Fetch Lives —Cam
  • Learn about the Promise concept with Fetch — from the MDN community

After reading the above two chapters, I just want to understand the concept of Fetch first, otherwise you will be confused in the following content.

After the network request is completed, it is necessary to display and update the data. At this time, another important knowledge point is involved, that is, [props] and [state]. All data transmission and control in RN are dependent on these two parts. So be sure to understand these two things before making a web request

  • React Native knowledge 11-Props and State
  • React Native Props — One of the Big Trends in Hybrid Development
  • React Native State — Wang Qiang

Then we can start making web requests happily, probably using the arrow function, which is ES6 syntax (similar to Android Lambda expressions). If you read from the beginning of this article, then I’m sure you’ve already read the ES6 article I recommended at the beginning of this article, so what’s wrong with that

  • The demo code is hereIf you’ve downloaded my entire HelloRN project, the code is in app/02_fetch_demo.

    Only the simple fetch usage is covered here, but we will cover some advanced uses later. If you don’t understand how to make network requests after seeing the code in the demo, take a look at the following article.

  • React Native Network Requests and UI Presentation — Fangshuai Wang

7. Use of tripartite library (estimated time: 2~3 days)

If you have seen this, you have successfully initiated the network request and displayed it in the interface. This is the first step in a long journey. In order to enhance the sense of achievement of learning, so I added a study about the use of tripartite library here. Some mature wheels can help us build the original framework of a commonly used App more quickly, which will give us motivation to continue learning. Here I have selected a few typical commonly used frameworks for demonstration.

1) How to import or remove a Node module in the first place

  • How to introduce third party components — Tmac50
  • How to delete third-party Components – I am Liu Cheng (after deleting Android remember to delete all build folders, and then rebuild)

2) Several commonly used frameworks

TAB class

  • The React-native Tab-Navigator works better as a bottom TAB and is super easy to use
  • React-native -scrollable-tab-viewIt works better as a TAB at the top, similar to the one in Toutiao

    If you’ve already downloaded my entire HelloRN project, the code is in app/eyepetizer_demo/ mainPage.js. But I’ve used a few others, and I’ve tried a lot of them, as you can see in my demo package.json. But this is the easiest one to use. Relatively stable

Banner class

  • react-native-swiper
  • react-native-banner(This is based on react-native swiper)

    The react-native banner used in the demo is simpler to use. If you’ve already downloaded my entire HelloRN project, the code is in app/03_library_demo/ bannertest.js. It wasn’t because of swpier, it was because I found banner first and didn’t want to change it later. Swiper can achieve more functions, such as the guide page, and more people use it, you can try swiper.

After adding these two libraries, does our demo look a bit like an App?

3) Some comprehensive frameworks

Of course, we can also choose a comprehensive framework for integration. I used the Native Base framework in the demo. However, the framework still has some limitations and bugs when I use it. As for UI-Toolkit, ACCORDING to the official way, I have tried for a long time but failed to install it. I don’t know the reason. I hope you can reply if you have successfully installed it. I’m sure people will ask which framework I’m going to use, but I think it’s best to try it all out at the beginning so that we know what to choose.

  • NativeBase
  • UI-Toolkit
  • react-native-elements

8. Scroll view (2~3 days)

After seeing the use of the tripartite framework above, I believe you will be motivated to study RN again! So this is going to make our Demo a little bit more like an App. Today’s apps are almost inseparable from tabular data display, so let’s take a look at the use of scroll views. A ScrollView in RN contains two parts: ScrollView and ListView.

8.1 ScrollView

Just like a ScrollView in Android, if the component contained in the ScrollView goes beyond the screen, it can scroll the content. And ScrollView can be set to scroll vertically or horizontally. There are a few other properties as well, as described below.

  • ScrollView use, with “ScrollView attributes” – idle a B
  • App /05_scroll_demo/ scrollViewtest.js

8.2 a ListView

Listviews in RN actually inherit from ScrollViews, which leads to a headache in RN, namely list performance. Fortunately, there are many articles on RN performance optimization, but I recommend waiting until we have a better understanding of RN. For now, just know that there is a solution!

  • App /05_scroll_demo/ listViewtest.js and videolistitem.js
  • “The React-Native ListView” — sidiWang
  • React Native pulls data from the network and populates lists. Read the above articles and combine the code in the demo to make sure you understand what’s going on here. In the demo, I’m going to extract the ListView item layout into a separate class to manage it. There’s going to be some parameter passing involved. If you don’t understand how parameters are being passed, go back and look at [props] and [state]. Because we’re going to use a lot of this stuff.

8.3 RefreshControl (Drop down Refresh)

I’ll just cover the use of the native pull-down RefreshControl here, which is supported on Android and iOS but rendered differently on both platforms. Support ScrollView and ListView component refresh, use is also very simple, directly look at the code. When RefreshControl is refreshed, you need to manually change the refresh state using the setState method. So here we come to another concept [state manager], and I’m sure you’ve read about Redux in many articles before trying to get started in RN, but have no idea what it is, leaving many people confused. Even me, I was totally confused at first about Redux. But when I learned here, I finally understood why such a thing is needed, because there are too many [states] to manage. If you manage it all manually, too many states can be annoying. So Redux is something that helps us better manage these state tools, and we’ll talk more about how to use Redux in a later stage.

  • App /05_scroll_demo/ listViewtest.js
  • RefreshControl Attributes complete — Jiang Qingqing

Of course, if you want, you can also find some three-party components to use, so that the refresh experience on Android and iOS is consistent. I found some components with a drop-down refresh feature that works on both platforms, so you can all try it out. As for the advantages and disadvantages, I have not used them, so IT is hard to say, but the attached STAR number can at least give you some reference.

  • React-native Pull-to-Refresh (currently Star 57)
  • React-native Gifted ListView (currently Star 808)
  • React-native Pull-to-Refresh ListView (current Star 57)

8.4 Pull-up Loading

There is no such component officially provided, so I can only realize it by myself. I tried some methods according to the online tutorials, but I was not particularly satisfied with them, and the effect was rather stiff. Therefore, this part is temporarily vacant and will be improved later. However, the react-native gifted-ListView mentioned in the drop-down refresh section above supports pull-up loading more. The framework can be integrated for use if necessary.

9. To summarize

The reason why I wrote this article in stages is that everyone can learn RN systematically step by step and have some sense of achievement in each stage. Can I briefly call it “achievement learning”? I don’t know if there is such a word, but I think the sense of achievement in the learning process is particularly important. After this stage of learning, if you are still interested in RN, then go to the second stage of learning. If you are still confused, I advise you to give up and focus on Android, iOS or Web