提供了接受用户通过键盘输入字符的功能,并可以通过后期的配置实现如自动纠错、自动大写、提示文字以及显示不同的键盘类型如邮件、数字等功能
6.8.触摸处理类组件TouchableHighlight在组件被点击时使用自定义的背景颜色进行高亮显示,以便在某些使用场景下让用户更能明确地感应到对应的操作
但只能包裹在一个层级的子元素上,如果有多个,那么就需要使用一个View组件将所有的元素包裹起来,再放置在TouchableHighlight组件下
6.9.网页WebView组件App中有些页面组件是经常变动的,如用户帮助等,或者加载一个别人提供的页面
6.10.滚动视图组件ScrollViewScrollView在指定了固定的高度之后即可以工作,用于生成一个可滚动的视图
但它会一次将所有的子元素渲染出来,数据量多的时候渲染效率肯定比较低下
React Native提供另一个组件FlatList用于改进这个组件的性能问题,会进行延迟渲染
7.React Native API详解 7.1.API简介React Native不仅为开发人员提供了大量用于App开发布局的组件,还提供了用于供开发人员调用的更加接近原生组件与功能的模块
7.2.提示框Alert用于提示用户的信息弹出框
如果在弹出提示框的同时需要用户输入一些信息,那么在iOS平台下就需要调用AlertIOS API
7.3.App运行状态AppState通过AppState可以获取到当前App是在前台运行还是在后台运行
AppState共有三种状态:active(正在前台运行),background(在后台运行),inactive(前后台切换的一个短暂状态)
7.4.异步存储AsyncStorage为开发者提供了一个异步的、未加密、持久的、全局的键值对(key-Value)存储模块,如同HTML5中的LocalStorage
IOS平台会使用原生代码将AsyncStorage中的小数据存储于序列化的字典数据结构中,而将大数据存储在单独的文件中
Android平台会将AsyncStorage存储于RocksDB或SQLite中,取决于哪一个模块是可用的
AsyncStorage是明文存储的。所以在iOS系统下,推荐将用户敏感信息存储在iOS的Keychain中,而在Android下,需要将用户敏感信息存储在SharedPreferences
iOS已有组件react-native-keychain,Android有react-native-sensitive-info组件
7.5.相机与相册APIReact Native框架中,API提供了CameraRoll供用户访问本地相册的功能,而在iOS系统中使用此功能时,还需要先链接RCTCameraRoll库
在App的开发过程中,一般在为用户提供读取相册的功能时,还应该给用户提供一个直接相机拍照的功能。所以在开发过程中会直接使用集成了读取相册以及使用相机拍照二合一的功能组件
开源组件React Native Image Picker提供了使用原生UI从设备相册中选取图片或者视频的功能,或者直接使用相机进行拍摄读取
7.6.地理位置信息Geolocation为App提供获取定位坐标的功能
7.7.设备网络信息NetInfo获取App当前网络状态的功能API
使用场景:通过网络的不同状态加载不同的资源,以便提高用户加载资源的速度,或者保存网络状态以便判断用户使用场景的变化
iOS系统设备状态:none、wifi、cell、unknown
8.React Native 网络请求详解 8.1.Restful API简介REST指的是一组架构约束条件和原则
8.2.React Native中的网络请求提供了Fetch API作为网络请求之用
现在产生的Fetch框架就是为了提供更加强大、高效的网络请求而生额。在Chrome浏览器中已经支持了Fetch函数
Fetch支持了大部分常用的HTTP的请求并和HTTP标准兼容
8.3.ListView组件在通过Fetch API获取数据后,一般会使用React Native中的ListView组件进行数据的绑定操作
9.常用React Native开源组件详解 9.1.React Native热门资源列表github地址:awesome-react-native
9.2.React Native接入微博、微信、QQ登录使用的组件是react-native-open-share
9.3.更加美观的组件库react-virgin
9.4.React Native 图表react-native-pathjs-charts,基于react-native-svg与paths-js
9.5.react-native-gifted-listview