给所有开发者的React Native详细入门指南

àì夳堔傛蜴生んèń 2023-03-03 05:52 0阅读 0赞

>  *  **本文为 Marno 原创，转载必须保留出处！**
>  *  **公众号【 aMarno 】，关注后回复 RN 加入交流群**
>  *  **React Native 优秀开源项目大全：[http://www.marno.cn][http_www.marno.cn]**

--------------------

**建议先下载好资料后，再阅读本文。[demo代码和资料下载][demo]**

## *目录* ##

*  **一、前言**
 *  **二、回答一些问题**
    
     *  1. 为什么写此教程
     *  2.本文适合哪些人看
     *  3.如何使用本教程
     *  4.需要先学习JavaScript、HTML、CSS么
     *  5.如何编写demo
     *  6.保不保证学习效果
 *  **三、章节内容（预计用时：9.5~14.5天）**
    
     *  1.内容简介
     *  2.环境搭建（预计用时：1~2天）
     *  3.Hello World（预计用时：0.5天）
     *  4.了解 index.android/ios.js
     *  5.Flex布局（预计用时：2~3天）
     *  6.网络请求（fetch）（预计用时：2~3天）
     *  7.三方库的使用（预计用时：2~3天）
     *  8.滚动视图（2~3天）
     *  9.总结

## 前言 ##

--------------------

从最开始开始接触 React Native（以下简称 RN），到写下第一篇博文后，就再也没有写过相关的文章了，随着微信小程序的正式发布，其实也又一次将一个概念推到公众面前，那就是全栈式前端，这是个什么概念呢？大概意思就是一个人可以同时写 Android、iOS、Web 程序。可能民间不乏一些大神 Java、OC、Swift、JS 都写得特别好，但我相信大部分人还是和我一样，毕业后只从事一个方向的开发，所以要成为全栈式前端有比较大的困难。

但是随着发 RN 布，这一切似乎变得有了可能。这也是随着社会进步不断要求生产力提高后导致的必然发展趋势。虽然这个概念早在RN前就有了，但是之所以能在这个时间火起来，那就说明时候到了。像手机上的指纹识别一样，并不是苹果第一个集成到手机上，但却是苹果把它用在了最正确的时代。现在连几百元的手机都有指纹识别了。所以如果去年你没有去关注去学习RN 不要紧，但是随着微信发布小程序，这再次说明了全栈式前端是一个趋势，如果你还没有趁机上车，那……那其实也没啥，一门心思写好 Android 其实也是可以的，毕竟专才也是要有的！

哈哈～前面说的有点危言耸听了，但还是希望那些学有余力、热爱并关注前端开发的人能早点搭上这趟车。虽然目前RN还有很多问题，比如首当其冲的就是性能问题，但是随着版本的不断迭代，我相信这个问题迟早会被解决的。你问我那是什么时候？现在RN版本是 0.40，会不会是 1.0 发布的时候呢？哈哈～这个谁能知道呢，但是有生之年肯定会的！说了这么多，让我们正式发车吧！

## 二、回答一些问题 ##

--------------------

*  为什么写此教程

> 首先主要是出于我们公司业务发展上的要求，并且我对 RN 开发很感兴趣，因为它确实可以提高生产力，所以公司就指派我负责这次 RN 在公司移动端内部的推行。其次是苦于网上虽然关于RN资料很多，但是却没有一个比较系统的学习方案，看视频课程又觉得效率太低，这也导致我在学习RN的过程中浪费了大量的时间去搜集资料。所以我想写一篇文章记录一下我的学习过程，将我从零开始的入门学习心得和大家分享一下。目的就是为了让更多想学 RN 的人，不用再东奔西走的把时间浪费在搜集资料，能够快速的入门进行学习。

*  本文适合哪些人看？

> 1.热爱前端开发，并且总想开发一些能看得见的东西  
> 2.对 RN 有着像对女朋友一样的兴趣，愿意去了解他  
> 3.可以不懂 Web 开发，但最好有一定 Android 或者 iOS 开发经验。  
> 4.对 RN 完全不了解的新人（如果是RN老司机不巧看到了这篇文章，我想说...哥，收徒么？我骨骼精奇，是个码代码的好手...哥....诶....别走啊....我还跪着呢！）

*  如何使用本教程？

> 看！多看！反复看！ 敲！多敲！反复敲！  
> 嘿嘿~说正经的，必须要结合我给出的 Demo 中的代码一起看。而且我会附上我在学习过程中梳理的思维导图文件，可以结合起来和文章一起看，这样学习的思路会更加清晰一些。

*  需要先学习 JavaScript、HTML、CSS 么？

> HTML 和 CSS 没什么要求，略懂就行，不懂也无所谓。但是JS还是要懂一点（卧槽，“一点”是多少？就和菜谱里的盐少许一样难以琢磨）。好吧，我再说详细一点。把阮一峰老师的[《 ECMAScript 6 入门》][ECMAScript 6]这篇关于ES6的文档花一周时间详细看一下其实就差不多了。至于 JS 里涉及的一些其他特性，闭包什么的，后面入门了再研究也可以。包括 ES7 关于网络请求写法的变化，我们也可以先不用管。

*  如何编写demo

> 是不是我们编写每一个知识点的demo都要通过 `react-native init XXXX` 的方式去新建一个项目呢？当然不是，我们可以把所有代码都写到一个demo里，并通过分包进行管理（app的文件夹是自己创建的，名字自定），这样自己看起来也比较方便。然后每个 demo 都通过 import 的方式导入到 `index.android/ios.js` 文件中进行使用。
> 
> ![format_png][]
> 
>

*  保不保证学习效果？

> 怎么不问我包不包就业呢？

## 三、章节内容（预计用时：9.5~14.5天） ##

### 1.内容简介 ###

--------------------

1.1）本教程共分为三个阶段，第一阶段主要是带大家入门，熟悉一些 RN 基础组件、JS 语法等等。该阶段结束后，基本可以搭建一个 App 框架了，甚至可以写一些简单的新闻类 App，在该阶段的教程中我仿写的是【开眼v3.1.2】。

1.2）本文中有大量的内容来自各家博客，所以出于对原文作者的尊重，我会直接给出原文链接并附上作者名字，如果看到对应的章节，请大家跳转到相应的网址去看一下。现在网上关于 RN 的文章太多，看的眼花缭乱结果却往往不容易形成体系，所以我只整理了一些必须的内容，而且相关的内容看我推荐这几篇文章基本也就够了。

1.3）在开始第一阶段的学习前，先来看一下完成这个阶段的学习后，我们大概能做出一个什么效果来。希望借此也能给你一些学习的动力吧！上图（被压缩太厉害了，凑合看吧）！

![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy85NjAyODMtOTc5Mzk3NzIyNmFmOGY0Yy5naWY_aW1hZ2VNb2dyMi9hdXRvLW9yaWVudC9zdHJpcHxpbWFnZVZpZXcyLzIvdy81ODIvZm9ybWF0L3dlYnA][]

### 2.环境搭建（预计用时：1~2天） ###

--------------------

> 按照RN中文社区的指导就可以了。不过过程中会遇到一些坑，我也附上我的踩坑记录。我建议大家可以先看一下踩坑记录，然后再开始安装环境。

2.1） 环境搭建踩坑指南:[《一起学》安卓 React Native 开发--踩坑大全（持续更新...）][React Native _--_...]  
2.2）[环境搭建中文教程，点击跳转RN中文社区][RN]  
2.3）开发工具安装和配置 :

> 本文中使用 WebStorm 进行开发，也有人用 Atom 或 Sublime，对此我想说：赶快换 WebStrom 吧。为了不牵扯什么不必要的问题，下载地址我就不贴了，自行破\*解吧。我最多只能说一下我用的是下面这个版本的。

![format_png 1][]

> 安装好 WebStorm 后，为了更便捷的去开发，我们需要安装一些插件，以及进行一些常用配置。比如RN组件库的安装，添加一些常用的Live Templates等，下图是我添加的两个比较常用的，给大家参考一下，至于如何添加 Live Template 大家可以自行百度一下，比较简单，我就不过多赘述了。  
> [《\[React Native\]去掉WebStorm中黄色警告》——于连林520wcf][React Native_WebStorm_520wcf]

![format_png 2][]

配置Live Templates

### 3.Hello World（预计用时：0.5天） ###

--------------------

不教大家写 Hello World 的教程,不是好教程！千万注意！【要看注释】哈！不然会很坑！

import React, { Component } from 'react';
    import { AppRegistry, Text } from 'react-native';
    
    class HelloWorldApp extends Component {
      render() {
        return (
          <Text>Hello World!</Text>
        );
      }
    }
    
    // 注意，这里用引号括起来的 'HelloWorldApp' 必须和你 init 时创建的项目名一致
    AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);

### 4.了解 index.android/ios.js ###

--------------------

> index.android.js 和 index.ios.js 分别作为 Android 手机和 iOS 手机上程序开始的入口，所以我们先来了解一下这个文件的结构。

**1）组件导入区：** 所有用到的组件都需要事先进行导入，包括样式也需要进行导入  
**2）核心代码区：**所有逻辑代码编写的地方  
**3）组件样式区：**render() 方法中用到的组件的样式，可以集中在这里编写  
**4）注册启动组件：**组件只有注册后才能运行。这里用到的 AppRegistry 也需要在组件导入区进行导入

![format_png 3][]

### 5.Flex布局（预计用时：2~3天） ###

--------------------

> Flex 布局是 Web 开发必备的技能，如果你是 Web 开发人员，可以直接跳过该部分内容。但是也需要注意的是 Web 中的一些属性在 RN 中是没有的，而且属性命名是通过小驼峰的方式进行命名的。后面我会附上我自己整理的关于 RN 组件支持的属性大全。可能不完善，但是常用的应该是有了。如果 Flex 布局没有练熟，还是不要看后面的了，所以请多花点时间在这里，甚至可以自己找一些比较有难度布局进行练习。

*  [《Flex 布局教程：语法篇》——阮一峰][Flex]
 *  [《Flex 布局教程：实例篇》——阮一峰][Flex 1]
 *  [《React-Native 的基本控件属性方法》——冬瓜小生][React-Native]
 *  [我也整理了一份 Excel 表，方便用到的时候快速查阅][Excel]
 *  [demo相关代码在这里][demo 1]，如果你已经下载了我整个 HelloRN 的项目，那代码就在app/01\_flex\_demo中

### 6.网络请求（fetch）（预计用时：2~3天） ###

--------------------

> 1.如果 Flex 布局你已经练习的比较熟练了，那我们来学习一下网络请求。其实现在的 App 大多都比较简单，无非就是布局的展示，网络数据的获取等等。如果搞定这两块内容，那我们至少会从 RN 的学习中获取一些成就感了，也才有继续下去的动力。
> 
> 2.这里要说明的是，如果你是 Android 或 iOS 工程师，那你需要习惯一下 RN 处理 Json 数据的方式（或者说 Web 处理 Json 的方式），我们通过网络请求回来的 Json Object 数据就可以直接进行操作，而不像 Native 开发，还需要通过什么额外的工具去进行 Json 的转换。这也是 Web 开发比较方便的地方。无论 Json Object 转 Json 字符串，还是 Json 字符串转 Json Object，都是非常方便的。如果非要把网络数据进行本地存储，那也很方便，通过解构赋值，直接就可以赋值给你创建的 Model 了。

*  [为什么使用 Fetch《传统 Ajax 已死，Fetch 永生》——**Cam**][Fetch_ Ajax _Fetch _Cam]
 *  [《使用 Fetch 先了解一下 Promise 概念》——来自 MDN 社区][Fetch _ Promise _ MDN]

> 看完上面两篇只是先了解一下 Fetch 的概念，不然后面的内容你会是懵逼的状态。

网络请求结束后，肯定是少不了数据的展示和更新，这时又会涉及到一个很重要的知识点，就是【props】和【state】，RN中所有数据的传递和控制，都离不开这两个部分。所以请务必在发起网络请求前就要搞懂这两个内容

*  [《React Native 知识11-Props (属性)与 State (状态)》——踏浪帅][React Native _11-Props _ State]
 *  [《混合开发的大趋势之 - React Native Props (属性)》——王亟亟][- React Native Props]
 *  [《 混合开发的大趋势之 - React Native State (状态)》——王亟亟][_ - React Native State]

接下来我们就可以开始愉快发起网络请求了，这里可能会用到箭头函数，这是 ES6 里面的语法（类似 Android 里面的 *Lambda* 表达式吧）。如果你是从文章的开始看下来的，那我相信你肯定已经看过在文章最开始我推荐的关于 **ES6** 的内容了，所以这里也不会有什么问题了

*  [demo 相关代码在这里][demo 2]，如果你已经下载了我整个 HelloRN 的项目，那代码就在app/02\_fetch\_demo中。

> 这里只涉及了简单的 fetch 用法，至于一些高级的用法，我们后面再讲。  
> 如果看了 demo 中的代码还不明白如何进行网络请求的，那可以再看一下下面这篇文章。

*  [《React Native网络请求及 UI 展示》——王方帅][React Native_ UI]

### 7.三方库的使用（预计用时：2~3天） ###

--------------------

> 如果你已经看到了这里，说明你已经可以成功的发起网络请求，并且展示到了界面上。万里长征我们这才算是踏出了第一步。为了增强学习的成就感，所以我在这里就加了一个关于三方库使用的学习。一些成熟的轮子，能更快的帮助我们搭建出一个常用 App 的原始框架，会让我们有继续学习的动力。这里我挑选了几个比较典型常用的框架进行演示。

**1）首先是如何引入或删除一个 node 模块**

*  [《如何引入第三方组件》——Tmac50][Tmac50]
 *  [《如何删除第三方组件》——我是刘成][Link 1]（删除后 Android 记得把所有 build 文件夹也删除，然后重新构建）

**2）几个常用框架**

<table> 
 <thead> 
  <tr> 
   <th><strong>tab类</strong></th> 
   <th><strong>banner类</strong></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>1. <a href="https://link.jianshu.com?t=https://github.com/exponent/react-native-tab-navigator" rel="nofollow">react-native-tab-navigator (使用较简单)</a> 更适合作为底部的 tab，使用方式也超级简单</td> 
   <td>1. <a href="https://link.jianshu.com?t=https://github.com/leecade/react-native-swiper" rel="nofollow">react-native-swiper</a></td> 
  </tr> 
  <tr> 
   <td>2. <a href="https://link.jianshu.com?t=https://github.com/skv-headless/react-native-scrollable-tab-view" rel="nofollow">react-native-scrollable-tab-view (star 最多的 tab 类控件)</a> 更适合作为顶部的 tab，类似今日头条中的效果</td> 
   <td>2.<a href="https://link.jianshu.com?t=https://github.com/sincethere/react-native-banner" rel="nofollow">react-native-banner</a> （这个是基于 react-native-swiper 的）</td> 
  </tr> 
  <tr> 
   <td><strong>备注：</strong>教程的 demo 中只提供了 <code>react-native-tab-navigator</code> 的代码<a href="https://link.jianshu.com?t=https://github.com/MarnoDev/HelloRN/blob/master/app/eyepetizer_demo/MainPage.js" rel="nofollow">【戳这里】</a>，如果你已经下载了我整个 HelloRN 的项目，那代码就在 <code>app/eyepetizer_demo/MainPage.js</code> 中。不过我也使用过一些其他的，而且还试了很多种，具体可以看一下我 demo 中的 package.json 就知道了。不过还是这个最易用。相对稳定一些</td> 
   <td><strong>备注：</strong>demo 中使用的是 <code>react-native-banner</code><a href="https://link.jianshu.com?t=https://github.com/MarnoDev/HelloRN/blob/master/app/03_library_demo/BannerTest.js" rel="nofollow">【戳这里】</a>，使用比较简单。如果你已经下载了我整个 HelloRN 的项目，那代码就在 <code>app/03_library_demo/BannerTest.js</code>。中并不是因为 swpier 怎么样，而是我先找到 banner，后面就懒得换了。目测 swiper 可以实现的功能就比较多了，比如引导页之类的，而且使用人数也更多，大家可以尝试一下 swiper。</td> 
  </tr> 
 </tbody> 
</table>

加入这两个库后，我们的 demo 看起来是不是就有点像一个 App 了呢？

![format_png 4][]

**3）一些综合框架**

> 当然我们也可以选择一个综合的框架进行集成使用。demo 中我使用了 native-base 框架。但是该框架在我使用过程中发现还是有很大局限性，而且还有一些 bug。至于 UI-Toolkit，按照官方的方式我尝试了很久并没有安装成功，不知道是什么原因，希望有安装成功的朋友可以回复一下。肯定会有人问那我究竟要使用哪一个框架，我觉得最开始入门学习的时候，最好都加进来试着使用一下，这样后面我们才能知道如何去取舍。

*  [NativeBase][]
 *  [UI-Toolkit][]
 *  [react-native-elements][]

### 8.滚动视图（2~3天） ###

> 看完上面三方框架的使用后，我相信你对RN的学习又有动力了！那接下来的内容会让我们的 Demo 更加的像一个 App 了。现在的 App 基本都离不开列表数据展示，所以接下来的内容就让我们一起学习一下滚动视图的使用。在 RN 中滚动视图包含两部分的内容【ScrollView】和【ListView】。

**8.1 ScrollView**

> 其实和 Android 中的 ScrollView 一样，如果包含在 ScrollView 的组件超出屏幕范围后，就可以对内容进行滚动。而且 ScrollView 可以设置竖向或者横向的滚动。还有一些其他属性，具体可以看下面的内容。

*  [ScrollView 使用，附《ScrollView 属性大全》- 闲得一B][ScrollView _ScrollView _- _B]
 *  附上 demo 代码[【戳我】][Link 2]，对应教程 demo 中的 app/05\_scroll\_demo/ScrollViewTest.js

**8.2 ListView**

> 在 RN 中的 ListView 其实是继承了 ScrollView 的，这导致目前RN有一个比较头疼的问题，就是列表的性能问题，不过还好网上有很多关于 RN 性能优化的文章，但是我建议还是等我们对RN有一定了解以后再看不迟。目前只要知道是有解决方案的就可以了！

*  附上 demo 代码[【戳我】][Link 3]，对应 demo 中的app/05\_scroll\_demo/ListViewTest.js和VideoListItem.js
 *  [《React-Native 组件用法详解之 ListView》——sidiWang][React-Native _ ListView_sidiWang]
 *  [《React Native 从网络拉取数据并填充列表》——共田君][React Native]  
    大家可以仔细阅读一下上面这两篇文章，然后在结合 demo 中的代码，就一定可以理解这里的内容了。demo 中需要注意的地方是，我把 listview 的 item 布局抽取成一个单独的类进行管理的，这里面就会涉及到一些参数的传递，如果看不明白参数是如何传递的，那可以返回去看一下上面关于 `props` 和 `state` 的内容。因为后面会大量的用到这些内容。

**8.3 RefreshControl（下拉刷新）**

> 这里我只讲述一下原生下拉刷新 RefreshControl 的使用，该组件支持 Android 和 iOS，但是在两个平台上的呈现方式不太一样。支持 ScrollView 和 ListView 组件的刷新，使用也很简单，直接看代码。
> 
> **讲到这里就需要大家特别注意了，**RefreshControl 刷新结束后是需要通过 setState 方法手动更改刷新状态的。所以这里我们就会涉及到另一个概念【状态管理器】，相信你自己在尝试入门 RN 前就在很多文章中看到过Redux，但是完全不理解这是个什么东西，导致很多人一头雾水。包括我也是，刚开始就给我说什么Redux我是完全懵逼的。
> 
> 但是学到这里的时候我终于可以理解了为什么需要这样一个东西了，因为有太多的【状态】需要我们去管理了。如果完全手动管理，状态多了就会很恼火。所以 Redux 就是一个东西帮助我们更好的管理这些状态工具，至于如何使用 Redux 我们在后面的阶段中再去细说。

*  附上 demo 代码[【戳我】][Link 3]，对应 demo 中的app/05\_scroll\_demo/ListViewTest.js
 *  [《RefreshControl 属性大全》——江青青][RefreshControl]

> 当然如果你愿意，也可以找一些三方的组件来使用，进而做到在 Android 和 iOS 上的刷新体验一致。我找到一些可以同时兼容两个平台的带有下拉刷新功能的组件，大家也可以都试一下。至于孰优孰劣，我都没用过，所以不好说，但是附上 star 数，至少可以给你一些参考吧。

*  [react-native-pull-to-refresh][](目前star 57)
 *  [react-native-gifted-listview][](目前star 808)
 *  [react-native-smart-pull-to-refresh-listview][](目前star 57)

**8.4 上拉加载**

> 官方并没有提供这样的组件，只能通过自己去实现，照着网上的教程我尝试了一些方式，但是感觉都不是特别满意，效果比较生硬。所以这部分内容暂时空缺，后面在完善。不过上面在下拉刷新那一节中提到的 react-native-gifted-listview，可以支持上拉加载更多。如果有需要，可以集成该框架进行使用。

### 9.总结 ###

> 之所以分阶段去写这篇文章，是想大家都可以循序渐进的系统的去学习RN，而且在每个阶段都可以有一些成就感。我可以简短的称之为【成就感学习法】么？不知道有没有这样一个词语，反正我觉得学习过程中的成就感是特别重要的。经过这个阶段的学习，如果你对RN还有兴趣，再去进行第二阶段的学习 ，如果到现在还是懵逼的状态，我劝你要不还是放弃好了，就一门心思的去做好 Andorid、iOS 或 Web也是挺好的，嘿嘿~

--------------------

![format_png 5][]

作者：Marno  
链接：https://www.jianshu.com/p/fa0874be0827  
来源：简书  
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

[http_www.marno.cn]: https://link.jianshu.com?t=http://www.marno.cn
[demo]: https://link.jianshu.com?t=https://github.com/MarnoDev/HelloRN
[ECMAScript 6]: https://link.jianshu.com?t=http://es6.ruanyifeng.com/
[format_png]: /images/20230208/9b77f6a8ff634813b3d2c0e7ae5a49ef.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy85NjAyODMtOTc5Mzk3NzIyNmFmOGY0Yy5naWY_aW1hZ2VNb2dyMi9hdXRvLW9yaWVudC9zdHJpcHxpbWFnZVZpZXcyLzIvdy81ODIvZm9ybWF0L3dlYnA]: /images/20230208/5308afacd8184b2abcdaa3f929594870.png
[React Native _--_...]: https://www.jianshu.com/p/276cb2c0283a
[RN]: https://link.jianshu.com?t=http://reactnative.cn/docs/0.40/getting-started.html#content
[format_png 1]: /images/20230208/1aaf2e01072147cf98770879d9c1152d.png
[React Native_WebStorm_520wcf]: https://www.jianshu.com/p/9a006fbb5a2a
[format_png 2]: /images/20230208/0aaeac8d3af545ca8a02bea3bb7ed530.png
[format_png 3]: /images/20230208/596e7ddfbaa345c58bcb740224edd702.png
[Flex]: https://link.jianshu.com?t=http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
[Flex 1]: https://link.jianshu.com?t=http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
[React-Native]: https://link.jianshu.com?t=http://www.cnblogs.com/Sweet-Candy/p/5695389.html
[Excel]: https://link.jianshu.com?t=https://github.com/MarnoDev/HelloRN/blob/master/RN%E7%BB%84%E4%BB%B6%E5%8F%AF%E7%94%A8%E5%B1%9E%E6%80%A7%E6%95%B4%E7%90%86.xlsx
[demo 1]: https://link.jianshu.com?t=https://github.com/MarnoDev/HelloRN/tree/master/app/01_flex_demo
[Fetch_ Ajax _Fetch _Cam]: https://link.jianshu.com?t=https://segmentfault.com/a/1190000003810652
[Fetch _ Promise _ MDN]: https://link.jianshu.com?t=https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise
[React Native _11-Props _ State]: https://link.jianshu.com?t=http://www.cnblogs.com/wujy/p/5853613.html
[- React Native Props]: https://link.jianshu.com?t=http://blog.csdn.net/ddwhan0123/article/details/52238478
[_ - React Native State]: https://link.jianshu.com?t=http://blog.csdn.net/ddwhan0123/article/details/52240463
[demo 2]: https://link.jianshu.com?t=https://github.com/MarnoDev/HelloRN/tree/master/app/02_fetch_demo
[React Native_ UI]: https://www.jianshu.com/p/4b3dd4cf8ee2
[Tmac50]: https://www.jianshu.com/p/0c91a9e810b4
[Link 1]: https://link.jianshu.com?t=http://blog.csdn.net/liu__520/article/details/52801139
[format_png 4]: /images/20230208/6630fb7a674146c2a015bc879d8f0bcc.png
[NativeBase]: https://link.jianshu.com?t=https://github.com/GeekyAnts/NativeBase
[UI-Toolkit]: https://link.jianshu.com?t=https://github.com/shoutem/ui
[react-native-elements]: https://link.jianshu.com?t=https://github.com/react-native-community/react-native-elements
[ScrollView _ScrollView _- _B]: https://www.jianshu.com/p/58301af1dbf2
[Link 2]: https://link.jianshu.com?t=https://github.com/MarnoDev/HelloRN/blob/master/app/05_scroll_demo/ScrollViewTest.js
[Link 3]: https://link.jianshu.com?t=https://github.com/MarnoDev/HelloRN/blob/master/app/05_scroll_demo/ListViewTest.js
[React-Native _ ListView_sidiWang]: https://www.jianshu.com/p/1293bb8ac969
[React Native]: https://www.jianshu.com/p/1c5dc5cd6d97
[RefreshControl]: https://link.jianshu.com?t=http://blog.csdn.net/developer_jiangqq/article/details/50672747
[react-native-pull-to-refresh]: https://link.jianshu.com?t=https://github.com/moschan/react-native-pull-to-refresh
[react-native-gifted-listview]: https://link.jianshu.com?t=https://github.com/FaridSafi/react-native-gifted-listview
[react-native-smart-pull-to-refresh-listview]: https://link.jianshu.com?t=https://github.com/react-native-component/react-native-smart-pull-to-refresh-listview
[format_png 5]: /images/20230208/3542b124b3ff4559954b89a71a14a5ef.png