定义组件:
class 组件名 extends Component {
render () {
return <Image> | <Text> | <view> //三个自带的组件
}
}
AppRegistry.registerComponent( ‘应用名 | 组件名’,() => 组件名 );//这个只能有一次
控制组件: props : 在父组件中指定,指定后不可改,(组件属性),固定
state: 可改,变化
初始化state: constructor(props){}
修改state: 用setState
样式: 使用驼峰命名法,使用const style = StyleSheet.create({})
样式尺寸无单位
写在组件中的样式要有两层{},而调用样式组件的只要一层{}即可
flex宽高: flex:1 意为让组件占用所有的空间,若值不一,则按比例占据
处理文本输入:
onChangeText: 文本变化时 onSubmitEditing: 文本被提交时调用
ScrollView: 可滚动的容器,可以垂直和水平滚动(通过horizontal控制)
ListView: 功能和ScrollView差不多,但性能更好 适合于长列表且元素可删可增
并不立即渲染所有内容,优先渲染屏幕可见元素 必须的属性:dataSource (列表的数据源) renderRow ( 逐个解析数据源你中的数据) rowHasChanged 函数
XMLHttpRequest:(ajax)
fetch(‘URL’)
fetch(‘url’,{method:’get’,headers:{},body:JSON.stringify({})}) //body为向服务器发送的数据,如果服务器无法识别,则写为 body: ‘key=value&key=value’
fetch(‘http://facebook.github.io/react-native/movies.json‘)
.then( (response) => response.json() ) // 将response(请求到的数据)转为json格式 还有response.text()
.then( (responseJson) => { return responseJson.movie; }) // 将json的movie return出去
.catch( (error) => { console.log(‘error’)})
asyns | await 语法,异步的完美解决方案
ios默认阻止所有非https的请求
颜色: 所有的都和css一样,#aaa rgb rgba transparent …
图片: <Image source = { require(‘./my-icon.png’) } /> // ./ 不能少,使用require时必须重启server
require后面的必须是字符串,但是 {} 里的可以说变量名
如果你有my-icon.android.png 和 my-icon.ios.png 会自动识别
使用 @2x @3x这样的后缀,为不同的精度提供图片 img@2x.png img@3x.png
使用混合app的图片 | 网络图片:
<Image source = {{ uri: ‘app_icon’ }} style={{ width: 40; height: 40 }} /> //必须指定尺寸
自动制定尺寸:
require(‘image!x’) 例如: require(‘image!logo’) //引用react.Imageset/logo.png
精灵图: <Image source = {{ uri: ‘something.jpg’ crop: { left:10,top:50,width:20,height:40} }} />
背景图嵌入:
return (
<Image source = {…..} >
<Text> inside </Text>
</Image>
)
touch事件:
<TouchableHeightlight onPress={事件名}></TouchHeightlight>
点击组件:
TouchableHeightlight : 用户点击时背景变暗 // 常用,但效果不明显
TouchableNativeFeedback : 用户按下类似涟漪效果 // Android
TouchableOpacity : 用户按下降低按钮的透明度,不会改变背景色 // 常用,用这个
TouchableWidthoutFeedback : 用户点击时不产生任何效果
触摸状态:
onPress : 点击
onLongPress : 长按
pagingEnabled : 滑动 //配合ScrollView组件使用(可水平垂直) | ViewPagerAndroid(水平)
maxmumZoomScale | minmumZoomScale : 双指缩放 //配合ScrollView使用
动画:(比较麻烦,完了再看看)
Animated: 创建更精细的交互控制的动画,仅关注动画的输入和输出声明,动画事件,响应当前动画值 LayoutAnimation: 在全局内创建和更新动画,常用来更新flexBox布局,Android中不好用
无障碍功能:
accessible (iOS | Android) : 单独加在标签内 accessible = {true} : 只可选中父元素,不能选中子元素 accessibilityLabel (ios | android) : 最好加上,让用户知道内容 // 用法和上面类似,后面为字符串 accessibilityTraits(ios) 告诉用户选择的是标签 | 按钮 | 头部
定时器:
setTimeout | clearTimeout : 竟可能快的执行 setInterval | clearInterval : setImmediate | clearImmediate : 在当前js执行结束的时候执行,在发送数据到原生之前,如果在其回调内部还有setImmediate,则紧接着立即执行,而不会再调用之前等原生代码. promise 的实现就是使用了setImmediate实现的 requestAnimationFrame | cancelAnimationFrame : 在每帧刷新之后执行一次 InteractionManager : 确保在执行工作之前所有的交互和动画已经处理完毕,提高效率,同时支持注册和清除动画 TimerMixin: 解决卸载组件后,计算器仍被激活的问题,可以避免很多BUG,属于ES5语法,es6需要清除 需要单独安装 //npm i react-timer-mixin --save 组件加 var TimerMixin = require(‘react-timer -mixin’) //组件外 mixins:[ TimerMixin ],然后所有的计算器前面都加上this. // 组件内
setNativeProps:(方法) 用于不得不频繁刷新但又遇到性能瓶颈的时候,不该常使用,用来做连续的动画
TouchableOpacity: (组件) 内部使用了setNativeProps方法
单元测试: cd react-native
./scripts/run-android-local-unit-test.sh
集成测试:cd react-native
npm install
./scripts/run-android-local-integration-test.sh
导航器对比:
Navigator: 适合于刚开始接触
使用纯JavaScript实现,在renderScene渲染不同的组件,用configureScene配置场景和动画
有很多方法,参Navigator ;
NavigatorIOS: 针对iOS平台开发,基于Apple的组件开发,NavigationExperimental: 想要更好的管理导航栈
性能:
console.log语句是否全部移除 : npm install babel-plugin-transform-remove-console --save
然后新建一个文件
开发模式(dev = true) :
缓慢的导航器(Navigator)切换:
ListView初始化太慢
使用transform:[{ scale }]来改变图片尺寸
升级:
时刻保持最新版本 react-native : npm info react-native 查看最新版本 更新react-native node react 升级项目模板
iOS和Android代码区分:
放到不同的文件夹里 或 在名称上加以区分 特定平台扩展名: aaaa.ios.js | aaaa.android.js // 命名后就可以在其他组件中直接应用aaaa,无需判断平台 Platform.select() // 返回对应平台的值 平台模块:(Platform) 如果组件只有一小部分代码需要一句平台定制,使用 Platform import { Platform,SrtleSheet } from ‘react-native’ ; var styles = StyleSheet.create({ height:(Platform.os === ‘ios’ ) ? 200 : 100,}); 检测Android版本: 使用Platform检测Android版本
手势响应系统:
TouchableHighlight: 做简单按钮或网络连接 Touchable: 生命周期:
原生模块:
Toast模块:Android在屏幕下方弹出,自动消失的弹窗
组件:
ActivityIndicator:显示圆形的loading加载符 //通用 属性:animating(是否显示指示器) color(前景颜色) size(指示器大小:small-20,large-36) DatePickerIOS: 在iOS平台渲染一个日期/时间选择器 //iOS 必须监听onDateChange回调并且及时更新date属性,否则用户的修改不起作用 属性: date(当前被选中的日期) maximumDate(可选的最大日期) minimumDate(可选的最小日期) minuteInterval(可选的最小的分钟单位) mode (选择器模式) ‘datetime’ : 星期 月 日 时 分 上午/下午 ‘date’ : 月 日 年 ‘time’ : 时 分 上午/下午 onDateChange (用户修改时的回调) timeZoneOffsetInMinutes (时区差 单位:分) Button: 属性: accessibilityLabel () color (ios:文本颜色; Android:背景色) disabled (若为真,则组件所有交互全部失效) onPress (点击button触发的函数) title (文本内容) 方法: DrawerLatoutAndroid:用于导航切换,子视图会成为主视图,初始不可见 // Android 属性:drawerLockMode (设置子导航的锁定模式) unlocked: 默认,相应打开和关闭的手势操作 locked-closed : 保持关闭,不可打开 locked-open : 保持打开,不可关闭 不管是哪种状态,都可以用openDrawer打开,用closeDrawer关闭 drawerPosition (指定子导航从哪边滑入) DrawerConsts.DrawerPosition.Left | DrawerConsts.DrawerPosition.Right drawerWidth (子导航的宽度) keyboardDismissMode (在拖拽过程中是否隐藏软键盘) none:默认,不隐藏 | on-drag:隐藏 onDrawerClose (子导航关闭的回调) onDrawerOpen (子导航打开的回调) onDrawerSlide (子导航产生交互的回调) onDrawerStateChange (子导航的状态变化的回调) 状态: idle (空闲),表示子导航无任何交互事件 draggle (拖拽中),交互中 settling (停靠中),刚刚结束导航条的交互 renderNavigationView (渲染一个可以从屏幕一边拖入的导航视图的回调,函数体为子导航的内容) Image: Android不支持GIF和webp格式的图片,需要做一些配置 //通用 属性: onLayout (当元素挂在或布局改变的回调) 参数: {nativeEvent: {latout: {x,y,width,height }}} onLoad (加载成功的回调) onLoadEnd (加载结束的回调,不管成功或失败) onLoadStart (加载开始的回调) resizeMode (当组件尺寸和图片尺寸不一时如何调整,组件必须给定尺寸) 在style里定义: resizeMode:Image.resizeMode.cover cover : 等比例缩放,不留空白 contain : 等比例放大,只要一边放大至正好,可能留有空白 stretch : 改变高宽比,占满这个组件 source {{ uri : ‘URL地址’}} (图片地址:可以是本地的也可以是网上的) style {{ 属性: 属性值 }} (图片css样式) testID (唯一的标识符,用来在脚本中识别元素) (iOS)accessibilityLabel (用户与图片交互时,会朗读文字) (iOS)accessible (为真时表示启用了无障碍功能) (iOS)blurRadius (模糊半径) (iOS)capInsets (九宫格) (iOS)defaultSource (一个静态图,在真正的图片下载中显示) (iOS)onError (加载错误的回调,参数 : {nativeEvent : {error} }) (iOS)onProgress (加载过程中不断调用的函数,参数 : {nativeEvent : {loaded,total} }) 方法: Image.getSize(uri:str,success : (width,height ) => void,failure : (error : any ) => void ) 在图片显示前获取图片宽高(单位px) Image.prefetch(url : str ) 预加载一个远程图片 KeyboardAvoidingView: 解决软键盘弹出时对视图的遮挡,本组件会自动调整自身的定位 属性: behavior (控制 height | position | padding这三者中的一个属性,只能选一个) // str contentContainerStyle (如果behavior设为position,会生成View容器,用于定义这个容器的样式) KeyboardVerticalOffset (用来修复应用距屏幕顶端的距离) 方法:relativeKeyboardHeight(keyboardFrame) onKeyboardChange(event) onLayout(event) ListView: 垂直的列表,属性:ScrollView props (可以使用scrollView的所有属性) dataSource (ListView.DateSource实例,列表依赖的数据源) initialListSize (指定组件加载时显示多少数据,利于优化性能) //number onChangeVisibileRows (当可见的行集合发生变化时的回调) onEndReached (列表滚到底部不足临界值是的回调 | 第一次渲染时数据不足一屏时调用) onEndReachedThreshold (临界值,单位:像素) // number pageSize (每次时间循环渲染的行数) // number removeClippedSubviews (用于提升大列表的滚动性能) //bool renderFooter (如果开启,页头和页脚在每次渲染时候更新) //fn renderRow (从Data source中接受一条数据,以及她和他所在的sectionID) renderScrollComponent (返回一个可滚动ScrollView的回调) renderSectionHeader (如果设置此函数,则为每一小节提供一个粘性标题) renderSeparator (若有,在每一行下面渲染一个组件,小节标题上面除外) scrollRenderAheadDistance (当一行接近屏幕多少范围内时开始渲染这一行) //number (iOS)stickyHeaderIndices (决定让那个元素固定在屏幕最顶端) 例如:stickyHeaderIndices = {[0]} //让第一个固定在最顶端,这个属性和horizontal = {true}一起使用 方法:getMetrics() 导出一些用于性能分析的数据 scrollTo() 滚动到指定的 x,y 的地方,可以指定是否加上动画 ListView.DataSource : 比较listView原始数据和传入的新数据,追加数据时需要concat,不能用push 方法:constructor:四个参数:getRowData,getSectionHeaderData,rowHasChanged,sectionHeaderHasChanged cloneWithRows():改变数据时用 cloneWithRowsAndSections():可额外指定sectionIdenttities getRowCount() rowShouldUpdate():返回值表明某行数据是否已变更,需要重新渲染 getSectionLengths():返回一个数组,包含每个section的行数量 getSectionHeaderData():获取section标题数据 MapView : 地图组件(用react-native-maps代替) 属性:(iOS)annotations (地图上的标注点,可以带有标题和副标题) (iOS)legalLabelInsets (地图上标签的合法范围,默认左下角) (iOS)mapType (要显示的地图类型) // standard-标准道理 satellite- 卫星视图 hybird- 卫星视图并附带道路和感兴趣的点标记 (iOS)maxDelta (可以被显示的最大区域尺寸) (iOS)minDelta (可以被显示的最小区域尺寸) onAnnotationPress (用户点击地图上的标注点的回调) // 多次 onRegionChange (用户拖拽地图时持续调用) // 一次 onRegionChangeComplete (用户停止拖拽的回调) // 一次 pitchEnable (true:地图会倾斜 ; false:地图不会倾斜) // 前提:关联一个有效的镜头 region (地图显示的区域) //中心点坐标和范围确定 rotateEnable (true: 可旋转地图 false: 不可旋转地图) // 前提:关联一个有效的镜头 scrollEnable (true:可改变地图显示区域 false: 不可改变) //默认:true showUserLocation (true: 应用请求用户的位置并聚焦到这个位置 false : 默认,不会请求) //需要在Info.plist中增加NSLocationWhenInUseUsageDescription字段。否则它会没有任何提示而直接失败 zoomEnabled (true: 默认,可旋转/缩放地图 false: 不可) (iOS)showsCompass (true: 默认,显示指南针 false: 不显示) (iOS)showsPointsOfInsterest (true : 默认,显示感兴趣的点 false:不显示) Mddal: 可以将编写的视图覆盖在原生视图上 Navigator:在不同的页面直接的切换 方法: (前缀:navigator.) getCurrentRoutes() //获取当前栈里的路由,就是push进来,没有pop掉的 jumpBack() //跳回之前的路由 jumpForward() //跳到下一个路由 jumpTo(route) // 跳到已有的场景并且不卸载 push(route) //增加一个新场景并且跳转过去 pop() //从尾部删除一个场景 replace(route) // 用一个新的场景替换当前的 replaceAtIndex(route,index) // 替换掉指定的场景 replacePrevIoUs(route) // 替换掉之前的场景 resetTo(route) // 跳转到新的场景,并且重置整个路由栈 immediatelyResetRouteStack(routeStack) //用新的路由数组来重置路由栈 popToRoute(route) //pop到路由指定的场景，在整个路由栈中，处于指定场景之后的场景将会被卸载 popToTop() //pop到栈中的第一个场景，卸载掉所有的其他场景 属性:initialRoute (初始化路由) //必须是initialRouteStack中的一个路由,而且是最后一项 initialRouteStack (初始化路由集合) navigatorBar (提供一个场景切换时保持的导航栏) onDidFocus (导航切换或初始化之后的回调) onWillFocus (会在导航切换之前调用) renderScene(必须,用来渲染指定路由的场景) sceneStyle (应用在每个场景的样式上) Picker: 在iOS和Android上渲染原生选择器 (通过滑动选择,可以是多级) // 比如三级联动 属性:onValueChange (某一项被选中时的回调) //两个参数: itemValue:被选中项的value属性 ; itemPosition :被选中项在Picker中的索引 selectedValue (默认选中的值) testID (用于在端对端测试中定位此视图) (Android)enabled (true: 可以选择 false: 禁用选择器) (Android)mode (用户点击选择器,呈现形式) // ‘dialog’ - 对话框形式 ‘dropdown’ - 下拉框形式 (Android)prompt (弹出的对话框标题) (iOS)itemStyle (应用在每项标签上的样式) ProgressBarAndroid:正在加载(圆环) ProgressBarIOS:正在加载(横线) RefreshControl : 在ScrollView 或 ListView内部,为其提供下拉刷新的功能,当ScrollView位于顶部时,此时下拉会触发onRefresh事件 属性:onRefresh (视图开始刷新时调用) //fn refreshing (是否在刷新时显示指示器) (Android)colors (指定至少一种颜色用来绘制刷新指示器) (Android)enabled (是否开启指示器) (Android)progressBackgroundColor (指定刷新指示器的背景色) (Android)size (指定刷新指示器的大小) (Android)progressViewOffset (指定刷新指示器的垂直起始位置(top offset)) (iOS)tintColor (指定刷新指示器的颜色) (iOS)title (刷新器下面的颜色) ScrollView : 可以横向和纵向滚动,同时还集成了触摸锁定的 ‘响应者’ 系统 // ScrollView必须有一个确定的高度才能工作,高度为所有父容器高度的和 // 在视图栈任意一个位置都要加{ flex : 1 },否则报错 属性: contentContainerStyle (所有子视图都会应用到这个样式) horizontal (true : 水平滚动 false: 默认,垂直滚动) keyboardDismissMode (用户拖拽滚动视图的时候，是否要隐藏软键盘) none : 默认,拖拽时不隐藏软键盘 on-drag : 当拖拽开始的时候隐藏软键盘 interactive : 软键盘伴随拖拽操作同步地消失，并且如果往上滑动会恢复键盘,// Android不支持 onContentSizeChange : 在ScrollView内部可滚动内容的视图发生变化时调用,参数为内容视图的宽和高,通过绑定在内容容器上的onLayout来实现 onScroll : 在滚动的过程中，每帧最多调用一次此回调函数 refreshControl : 用于为ScrollView提供下拉刷新功能,在这个属性内加载refreshControl组件 removeClippedSubviews : true:可大幅提升滚动性能 showsHorizontalScrollIndicator : 显示一个水平的滚动条 showsVerticalScrollIndicator : 显示一个垂直的滚动条 (Android)endFillColor : 视图之外的内容用颜色填充,高级优化技巧 (iOS)alwaysBounceHorizontal : true:即使内容宽度小于视图宽,也可以弹性拖动 (iOS)alwaysBounceVertical : true:即使内容高度小于视图宽,也可以弹性拖动 ……… 方法:scrollTo({x:0,y:0,animated:true}) // 滚动到指定的x,y偏移处,animated为true时平滑移动 SegmentedControlIOS : Slider : 一个进度条 可手动拖拽最大为1 StatusBar : 设置手机顶部状态栏的 Text : 设置文本的 属性:numberOfLines : 规定一个行数,当文本超过时剪切 onLayout : 当挂载或布局发生变化时的回调 onPress : 当文本被点击的回调 selectable:觉得用户是否长按选择文本,以便复制和粘贴 testID: 用来在端到端测试中标记这个视图 (iOS)suppressHighlighting : false(默认,文本被按下时会有一个灰色的、椭圆形的高光) true:不会有效果 嵌套文本: Text组件可以嵌套使用 容器: Text组件内部不能使用flex布局,只能采用文本布局,文本必须放到Text组件内,TextInput : 输入框 属性:autoCapitalize : 控制TextInput是否要自动将特定字符切换为大写 blurOnSubmit : 单行: true(默认,失焦并提交) 多行: false (默认,按下回车,换行) placeholder : 文本框初始值 editable : true:默认,文本框可修改 keyboardType : 决定弹出何种软键盘 //default:中文 numeric:纯数字键盘 email-address:英文 maxLength : 限制文本框中最多的字符数 multiline : true(文本框可输入多行文字) false(默认,单行) onChangeText : 当文本框内容变化时调用此回调函数。改变后的文字内容会作为参数传递 onEndEditing : 当文本输入结束后调用此回调函数 onSubmitEditing : 当软键盘的 确定/提交 按钮被按下的时候调用此函数。如果multiline={true}，此属性不可用 secureTextEntry : true(用于输入密码) false(默认,显示输入内容) selectTextOnFocus : true(获得焦点,input里所有内容默认选中) false(默认,不选择) (Android)numberOfLines : 设置输入框的行数。当multiline设置为true时使用它，可以占据对应的行数 方法:isFocused() 返回值表明当前输入框是否获得了焦点 clear() 清空输入框的内容 ToolbarAndroid: 设置头部(icon title icon) 属性:actions : 配置右边icon点开的参数 View: 最基础的组件,相当于 div ViewPagerAndroid : 一个允许左右翻页的容器,每一个子容器(View)都是单独的一页,并且会被拉伸填满这个父容器 属性:initialPage : 初始化显示第几页 keyboardDismissMode : 拖动时候是否让软键盘消失 // none:默认,不会消失 on-drag:拖拽开始消失 onPageScroll : 在页面切换时执行的回调 onPageScrollStateChanged : 页面滑动状态变化时的回调 状态: idle : 没有任何交互 dragging : 拖动中 settling : 意味着当前页面发生过交互，且正在结束开头或收尾的动画 onPageSelected : 页面切换完成后的回调 scrollEnabled : true(默认,可滚动) false(禁止滚动) WebView : 创建一个原生的webView,可以用于访问网页 属性:(iOS)allowsInlineMediaPlayback : 指定HTML5视频是在网页当前位置播放还是使用原生的全屏播放器播放。 默认值为false (Android)domStorageEnabled : 指定是否开启dom本地存储 source : 指定在新页面的html内容 | url // str injectedJavaScript : 在网页加载前设置一段js代码 mediaPlaybackRequiresUserAction : 设置页面中的HTML5音视频是否需要在用户点击后再开始播放。默认值为false onLoadStart onLoadEnd onLoad onError renderError : 设置一个函数，返回一个视图用于显示错误 renderLoading : 设置一个函数，返回一个加载指示器
API
ActionSheetIOS:在ios显示一个弹出框,方法: showActionSheetWithOptions() 显示一个弹出框,包含删除和取消 showShareActionSheetWithOptions() 显示一个分享弹出框 AdSupportIOS: 方法: getAdvertisingId(successCB,errorCB) getAdvertisingTrackingEnabled(successCB,errorCB) Alert : (Android)启动一个提示对话框，包含对应的标题和信息 方法: Alert.alert( title(str),message(str),[{text: 'OK',onPress: () => console.log('OK Pressed!')},{ … },{ … } ]) //多个按钮 AlertIOS: 方法:alert() 弹出警示 prompt() 一个输入框和两个按钮 Animated:动画 默认VIew,Image,Text是可以动画化的,自定义的可以用createAnimatedComponent 插值函数很重要,可以映射范围,interpolate 方法: decay() 缓冲动画效果 timing() 曲线动画效果,spring() Spring动画,在tovalue值更新的同时跟踪当前的速度,确保动画连贯 add() 将两个动画值相加,得到一个新的动画 multiply() 将两个动画值相乘,得到一个新的动画值 delay() 指定一个延迟时间执行动画 sequence() 按顺序执行一个数组里的动画,parallel() 同时开始一个数组里的全部动画,如果有一个停止了,其余的也停止 stagger() 动画数组里的可能会同时执行,用来制作拖尾效果 event() createAnimatedComponent() 使得一个react组件支持动画,用它来创建Animated.View 属性: Value: 用 new Animated.Value(0) 来初始化,驱动动画 ValueXY: 表示一个2D值得类,用来驱动2D动画,例如拖动 AppRegistry: RN应用的入口,用于注册应用 方法: registerConfig() registerComponent() 注册组件 registerRunable() getAppKeys() runApplication() unmountApplicationComponenAtRootTag() AppState : android告诉你应用当前在前台还是后台 AsyncStorage : 用来替代localStorage,对于APP来说是全局的 方法: 推荐使用中文网里的组件 : https://github.com/sunnylqm/react-native-storage/blob/master/README-CHN.md BackAndroid : 监听硬件的back键操作,如果没有绑定任何函数或监听函数的返回值不是true,则退出应用 方法: BackAndroid.exitAPP() addEventListener() removeEventListener() CameraRoll : 提供访问本地相册的功能 .saveImagewithTag(url) 保存一个图片到相册 .getPhotos() 返回一个带有图片标识符对象的Promise Clipboard : 在剪切板中读取/写入内容 .getString() 获取剪切板的文本内容 .setString(str) 设置剪切板的内容 DatePickerAndroid : 打开一个标准的安卓日期选择器 .open(option) // 打开 option:date(默认显示的日期) minDate(可选的最小日期) maxDate(可选的最大日期) //选好后返回一个包含年月日等信息的promise .dateSetAction() // 已选中一个日期 .dismissedAction() // 取消对话框 Dimensions: 用来获取屏幕的宽高 Geolocation: 用来获取地理位置信息 方法: getCurrentPosition() 成功的回调中会包含最新的位置信息 watchPosition() 持续的监听位置,每当位置发生变化调用success回调 clearWatch() stopObserving() ImageEditor: 根据指定的URL参数剪裁对应的图片,成功后保存在ImageStore里面 ImageStore: 属性: hasImageForTag() 检查ImageStorage中是否包含URI数据,仅限IOS removeImageForTag() 从imageStorage里面删除图片 仅限IOS InteractionManager: 将一些耗时较长的工作安排到所有动画和互动完成之后执行,保证了js动画的流畅 .runAfterInteractions(CB) 安排一个函数在所有互动和动画结束之后运行 .createInteractionHandle(CB) 通知管理器某个动画或互动开始了 .clearInteractionHadle(CB) 通知管理器某个动画或互动结束了 .setDeadline(number) 设定一个值,使用setTimeout挂起所有没执行的任务,到达时间后开始执行任务 Keyboard: 控制键盘相关的事件 LayoutAnimation: 当布局变化时,自动将试图运动到新的位置上 .configureNext() 计划下一次布局要发生的变化,然后调用setState .create() 用来创建configureNext所需的config参数的辅助函数 Linking: 用来于穿如何穿出的app链接进行交互 .addEventListener() 监听Linking的变化 .removeEventListener() 删除一个时间处理函数 .openURL() 打开一个新的URL //http://不能省略 .canopenURL() 判断设备上是否安装有能打开此链接的应用 // http:// 不能省略 .getInitialURL() 如果应用是被一个连接调起的,则返回相应的链接地址 NativeMethodsMixin: 提供了一些用于访问底层原生组件的方法,不能再复合组件中使用 .measure(CB) 计算指定视图在屏幕上显示的位置和尺寸,返回:x,height,pageX,pageY .measureLayout() 计算相对于祖先节点的位置和尺寸 .setNativeProps() 直接发送属性到原生代码 .focus() 请求聚焦指定的输入框或者视图 .blur() 移除指定输入框或者视图的焦点 NetInfo: 可以获知设备联网或者离线的状态信息 方法: isConnectionExpensive() 仅限android,用于判断当前活动的连接是否计费 isConnected() 异步判断当前设备是否联网 addEventListener() 在网络状况和类型发生变化时的回调 removeEventListener() 移除 fetch() 返回一个promise,用于获取当前的网络状况/类型 isConnectionExpensive() 属性: isConnected 只能知道是够联网,具体什么网络类型还得用fetch() PanResponder: 可以将多点触摸协调成一个手势,可以使一个简单的单点触摸接受更多的触摸操作 方法:create() PermissionsAndroid: 可以访问Android 6.0开始提供的权限模型,弹出一些危险的权限请求给客户 .checkPermission() 返回用户是否授权过得布尔值 .requestPermission() 弹出提示框向用户请求某项权限,返回值表明用户是否同意了权限请求 PixelRatio: 访问设备像素密度的方法 方法:get() 返回像素的密度 getFontScale() 返回字体大小的缩放比,getPixelSizeForLayoutSIze() 将一个布局尺寸(dp)转为像素(px) PushNotificationIOS: 处理应用的推送通知,包括权限控制以及应用图标上的角标数 方法:presentLocalNotification() 立即产生一个本地通知 scheduleLocalNotification() 计划一个本地通知,在将来进行提示 cancelAllLocalNotification() 取消所有已计划的本地通知 setApplicationIconBadgeNumber() 设置在手机主屏幕应用图标上的角标数(未读消息数) getApplicationIconBadgeNumber() 获取角标数 addEventListener() 监听远程或本地的推送通知,不管应用在全台还是后台运行 requestPermissions() 向ios系统请求统治权限,向用户展示及一个对话框,权限类型: alert | badge | sound abandonPermissions() 注销所有从苹果推送服务收到的远程消息 checkPermissions () 检查哪些通知被开启,StyleSheet: 定义css样式 方法:create() 属性:hairlineWidth : 常亮,定义当前平台的最细宽度 TimePickerAndroid: 打开一个标准的Android时间选择器 .open(opt) 打开时间选择器 .timeSetAction() 已选中一个时间 .dismissedAction() 取消对话框 ToastAndroid: 在Android设备上显示一个悬浮的提示信息 方法: show(message:str,duration:number) 属性: SHORT 持续显示短时间 LONG 持续显示长时间 Vibration: 控制设备的震动 方法:vibrate() 控制设备的震动 cancel() 停止震动
布局样式属性
flex:flex布局
flex:
alignItems:
alignSelf:
borderBottomWidth:
flexDirection:
flexWrap:
justifyContent:
marginHorizontal: 相当于同时设置marginleft和marginright
marginVertical: 相当于同时设置marginTop和marginBottom
maxHeight:
minHeight:
paddingHorizontal: 同时设置paddingLeft和paddingRight
paddingVertical:
position: // ‘absolute’ ‘relative’ absolute总是以父元素定位
zIndex: 定位的层级
阴影样式
(ios)shadowColor:
(ios)shadowOffset {width:Nbr,height:Nbr}:
(ios)shadowOpacity:
(ios)shadowRadius: