学习笔记: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,以避免被遮挡。

二、第三方组件库

三、页面的跳转

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

react-navigation 4.x的使用

四、网络编程

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

五、本地数据持久化

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

六、开源项目学习

常用开学库

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容