reactNative官方文档重难点摘录
来源:互联网 发布:网络攻击防御体系 编辑:程序博客网 时间:2024/06/18 04:47
定义组件:
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, y,width , 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:
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, y,width , 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:
阅读全文
0 0
- reactNative官方文档重难点摘录
- Influxdb-官方文档摘录
- iOS - apple官方ARC文档关键点摘录
- Cocos Creator使用 cc.Class 声明类型(官方文档摘录)
- Cocos Creator 访问节点和组件(官方文档摘录)
- Cocos Creator 常用节点和组件接口(官方文档摘录)
- Cocos Creator 生命周期回调(官方文档摘录)
- Cocos Creator 创建和销毁节点(官方文档摘录)
- Cocos Creator 加载和切换场景(官方文档摘录)
- Cocos Creator 监听和发射事件(官方文档摘录)
- Cocos Creator中使用动作系统(官方文档摘录)
- Cocos Creator中使用动作列表(官方文档摘录)
- Cocos Creator中使用计时器(官方文档摘录)
- Cocos Creator中使用对象池(官方文档摘录)
- Cocos Creator中获取和加载资源(官方文档摘录)
- Cocos Creator中模块化脚本(官方文档摘录)
- Cocos Creator 生命周期回调(官方文档摘录)
- C 重难点知识
- 网桥、ipv6的基本设置
- 面试题1
- 双向链表的实现
- BZOJ3687:简单题
- 48-C语言-子串
- reactNative官方文档重难点摘录
- /usr/bin/ld: cannot find -lm的解决方法
- IO流
- eclipse中碰到的异常
- Hadoop环境搭建(ubuntu+hadoop2.7
- Linux系统操作(3)———JDK、eclipse、Tomcat的安装
- 1118. Birds in Forest (25)[并查集]
- ViewFlipper
- (DP)LeetCode#53. Maximum Subarray