学习笔记：RN之组件、库、开源项目学习

一、常用组件汇总

1.1、View， 基础视图组件，相当于iOS的UIView和Android的Activity。

1.2、图片显示组件

• Image，图片
• ImageBackground，背景图片

1.3、事件响应组件

• TouchableOpacity/TouchableHighlight，后者支持设置高亮颜色。
• Button，按钮组件，样式固定，只支持简单属性配置。定制化的需求使用TouchableOpacity来扩展支持。

1.4、文本相关

• Text，文本显示组件；
• TextInput，文本输入组件

1.5、滚动和列表

• ScrollView，滚动视图组件，相当于iOS的UIScrollView。
• FlatList/SectionList/VirtualizedList，列表，支持惰性渲染子元素。
  相当于iOS中的UITableView，其中VirtualizedList 是 FlatList/SectionList 的底层实现，SectionList 是支持分组的列表。

1.6、Modal，一种简单的覆盖在其他视图之上显示内容的方式。

类似于iOS的模态视图的概念，可以用来实现，例如Toast、loading框、弹窗等等。

1.7、其他

• ActivityIndicator，圆形的 loading 提示符号组件
• RefreshControl，下拉上拉组件
• Switch，on/off的开关组件
• StatusBar，状态栏组件
• KeyboardAvoidingView，主要用来解决：手机上弹出的键盘常常会挡住当前的视图。本组件可以自动根据键盘的高度，调整自身的 height 或底部的 padding，以避免被遮挡。

二、第三方组件库

• 11个React Native 组件库和 Javascript 数据可视化库

三、页面的跳转

React Navigation 包含三种模式，分别是StackNavigator栈导航、TabNavigator标签导航、DrawerNavigator抽屉导航（从侧边栏划出抽屉一样的效果），这基本覆盖现有移动端的交互场景。
最早选择使用ReactRouter，现在基本上用 React Navigation 替代，做为页面跳转首选。

react-navigation 4.x的使用

四、网络编程

RN框架提供 Fetch 来实现网络连接。

五、本地数据持久化

• AsyncStorage
  以键值对的形式进行存储数据。
  在 iOS 上，AsyncStorage在原生端的实现是把较小值存放在序列化的字典中，而把较大值写入单独的文件。在 Android 上，AsyncStorage会尝试使用RocksDB，或退而选择 SQLite。

数据库

• react-native-sqlite-storage
• realm 宣称自己是最快的 react-native 数据库。
  不是ORM(对象关系映射数据库)，也不是建立在sqlite之上。
  React Native数据本地存储-Realm

六、开源项目学习

• 学习React Native必看的几个开源项目

常用开学库

• 框架Redux，有对应的ReactNative-Redux
  Redux 的设计思想很简单，就两句话。
  （1）Web 应用是一个状态机，视图与状态是一一对应的（State-SinglePage）。
  （2）所有的状态，保存在一个对象里面（即Store，全局唯一）。

  Redux 入门教程（一）：基本用法
  Redux 入门教程（二）：中间件与异步操作