一、常用组件汇总
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,以避免被遮挡。
二、第三方组件库
三、页面的跳转
React Navigation
包含三种模式,分别是StackNavigator
栈导航、TabNavigator
标签导航、DrawerNavigator
抽屉导航(从侧边栏划出抽屉一样的效果),这基本覆盖现有移动端的交互场景。
最早选择使用ReactRouter
,现在基本上用 React Navigation 替代,做为页面跳转首选。
四、网络编程
RN框架提供 Fetch 来实现网络连接。
五、本地数据持久化
-
AsyncStorage
以键值对的形式进行存储数据。
在 iOS 上,AsyncStorage
在原生端的实现是把较小值存放在序列化的字典中,而把较大值写入单独的文件。在 Android 上,AsyncStorage
会尝试使用RocksDB,或退而选择 SQLite。
数据库
- react-native-sqlite-storage
- realm 宣称自己是最快的 react-native 数据库。
不是ORM(对象关系映射数据库),也不是建立在sqlite之上。
React Native数据本地存储-Realm
六、开源项目学习
常用开学库
-
框架Redux,有对应的ReactNative-Redux
Redux 的设计思想很简单,就两句话。
(1)Web 应用是一个状态机,视图与状态是一一对应的(State-SinglePage)。
(2)所有的状态,保存在一个对象里面(即Store,全局唯一)。