学习笔记: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,其中VirtualizedListFlatList/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 入门教程(二):中间件与异步操作

你可能感兴趣的:(学习笔记:RN之组件、库、开源项目学习)