對(duì)React-Native的學(xué)習(xí)彰亥,從熟悉基本控件開(kāi)始蟆盐。
View
屬性方法
序號(hào)名稱屬性O(shè)r方法類型說(shuō)明
1
accessibilityLabel屬性string
2
accessible
屬性bool
當(dāng)為true時(shí)匆浙,表示該元素是可以進(jìn)行訪問(wèn),
默認(rèn)情況下所有可觸摸的元素控件都是可以訪問(wèn)的
3
onAccessibilityTap方法function
該當(dāng)accessible為true的時(shí)候并且用戶對(duì)控件View做了一個(gè)Tap(輕輕的觸摸或者點(diǎn)擊)的手勢(shì)
4
onLayout方法function
當(dāng)組件的布局發(fā)生變動(dòng)的時(shí)候,會(huì)自動(dòng)調(diào)用下面的方法
:{nativeEvent: { layout: {x, y, width, height}}}知染。
該事件當(dāng)重新計(jì)算布局的時(shí)候會(huì)立即進(jìn)行觸發(fā),不過(guò)界面可能不會(huì)立即刷新括蝠,
特別當(dāng)布局動(dòng)畫(huà)正在加載中的時(shí)候鞠抑。
5
onMagicTap方法function
當(dāng)accessible為true的時(shí)候,當(dāng)用戶雙指點(diǎn)擊(Magic Tap)的時(shí)候忌警,進(jìn)行觸發(fā)
風(fēng)格樣式
在React Native中的Style風(fēng)格布局搁拙,其實(shí)和CSS樣式有很多相似的地方,這邊介紹一下:
Style標(biāo)簽說(shuō)明Style標(biāo)簽說(shuō)明
FlexBox彈性布局(詳細(xì)點(diǎn)擊了解)transforms
動(dòng)畫(huà)屬性(詳細(xì)點(diǎn)擊了解)
backfaceVisibilityenum('visible', 'hidden')定義界面翻轉(zhuǎn)的
時(shí)候是否可見(jiàn)backgroundColor背景顏色
borderColor邊框顏色,這邊幾個(gè)就是代表上下左右變寬的顏色borderTopColor,borderRightColor,
borderBottomColor,borderLeftColorborderRadius邊框圓角大小法绵,其他幾個(gè)是上下左右邊框的圓角.borderTopLeftRadius,borderTopRightRadius,
borderBottomLeftRadius,borderBottomRightRadius
borderStyle邊框線的風(fēng)格,這個(gè)和CSS樣式一樣的
,enum('solid', 'dotted', 'dashed')borderWidth邊框?qū)挾然伲硗馑膫€(gè)是上下左右的邊框?qū)挾?borderTopWidth,borderRightWidth朋譬,borderBottomWidth弧满,borderLeftWidth
opacity設(shè)置透明度overflow設(shè)置內(nèi)容超過(guò)容器顯示還是隱藏
elevation高度,設(shè)置Z軸此熬,可以產(chǎn)生立體效果
下面是幾個(gè)特殊的屬性庭呜,這邊直接介紹所有平臺(tái)通用以及只在Android平臺(tái)有效果的屬性
①.testID? (全平臺(tái))
可以根據(jù)該testID在測(cè)試的時(shí)候定位該View
②:accessibilityComponentType(android平臺(tái))
定義是否該UI組件和原生組件一致化處理
③.accessibilityLiveRegion? enum('none','polite','assertive')? (android平臺(tái))
該當(dāng)View發(fā)生更新時(shí)候的,是否需要通過(guò)用戶犀忱,不過(guò)該只對(duì)Android4.4以及以上的平臺(tái)設(shè)備有效果
④.collapsable (android平臺(tái))
布局合并優(yōu)化使用
⑤.importantForAccessibility enum('auto', 'yes', 'no', 'no-hide-descendants') (android平臺(tái))
設(shè)置視圖響應(yīng)事件等級(jí)
⑥.needsOffscreenAlphaCompositing? (android平臺(tái))
設(shè)置View是否需要渲染和半透明度效果處理的先后次序募谎。
⑦.renderToHardwareTextureAndroid? (android)
設(shè)置是否需要GPU進(jìn)行渲染
Text
屬性方法(主要一些可用的屬性)
①.allowFontScaling (bool):控制字體是否根據(jù)iOS的設(shè)置進(jìn)行自動(dòng)縮放-iOS平臺(tái),Android平臺(tái)不適用
②.numberOfLines (number):進(jìn)行設(shè)置Text顯示文本的行數(shù),如果顯示的內(nèi)容超過(guò)了行數(shù)阴汇,默認(rèn)其他多余的信息就不會(huì)顯示了数冬。
③.onLayout (function) 當(dāng)布局位置發(fā)生變動(dòng)的時(shí)候自動(dòng)進(jìn)行觸發(fā)該方法, 其中該function的參數(shù)如下:
[code lang="" start="" highlight=""]{nativeEvent: {layout: {x, y, width, height}}}[/code]
④.onPress (fcuntion) 該方法當(dāng)文本發(fā)生點(diǎn)擊的時(shí)候調(diào)用該方法.
風(fēng)格樣式
1..繼承可以使用View組件的所有Style(具體查看http://facebook.github.io/react-native/docs/view.html#style)
2.color:字體顏色
3..fontFamily 字體名稱
4..fontSize? 字體大小
5..fontStyle?? 字體風(fēng)格(normal,italic)
6..fontWeight? 字體粗細(xì)權(quán)重("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
7..textShadowOffset 設(shè)置陰影效果{width: number, height: number}
8..textShadowRadius 陰影效果圓角?????? 9..textShadowColor 陰影效果的顏色
10.letterSpacing 字符間距??????????? 11.lineHeight 行高
12.textAlign?? 文本對(duì)其方式("auto", 'left', 'right', 'center', 'justify')
13.textDecorationLine? 橫線位置 ("none", 'underline', 'line-through', 'underline line-through')
14.textDecorationStyle?? 線的風(fēng)格("solid", 'double', 'dotted', 'dashed')
15.textDecorationColor? 線的顏色?????? 16.writingDirection? 文本方向("auto", 'ltr', 'rtl')
Image
屬性方法
1.onLayout?? (function) 當(dāng)Image布局發(fā)生改變的,會(huì)進(jìn)行調(diào)用該方法搀庶,調(diào)用的代碼為:
{nativeEvent: {layout: {x, y, width, height}}}.
2.onLoad (function):當(dāng)圖片加載成功之后拐纱,回調(diào)該方法
3.onLoadEnd (function):當(dāng)圖片加載失敗回調(diào)該方法,該不會(huì)管圖片加載成功還是失敗
4.onLoadStart (fcuntion):當(dāng)圖片開(kāi)始加載的時(shí)候調(diào)用該方法
5.resizeMode? 縮放比例,可選參數(shù)('cover', 'contain', 'stretch') 該當(dāng)圖片的尺寸超過(guò)布局的尺寸的時(shí)候哥倔,會(huì)根據(jù)設(shè)置Mode進(jìn)行縮放或者裁剪圖片
6.source {uri:string} 進(jìn)行標(biāo)記圖片的引用秸架,該參數(shù)可以為一個(gè)網(wǎng)絡(luò)url地址或者一個(gè)本地的路徑
樣式風(fēng)格
1.FlexBox? 支持彈性盒子風(fēng)格
2.Transforms? 支持屬性動(dòng)畫(huà)??????????????? 3.resizeMode? 設(shè)置縮放模式
4.backgroundColor 背景顏色
5.borderColor???? 邊框顏色????????????? 6.borderWidth 邊框?qū)挾?/p>
7.borderRadius? 邊框圓角
8.overflow 設(shè)置圖片尺寸超過(guò)容器可以設(shè)置顯示或者隱藏('visible','hidden')
9.tintColor? 顏色設(shè)置???????? 10.opacity 設(shè)置不透明度0.0(透明)-1.0(完全不透明)
TextInput
屬性方法(這邊講解平臺(tái)公用以及Android生效的屬性方法)
3.1.View 支持View的相關(guān)屬性
3.2.autoCapitalize? 控制TextInput輸入的字符進(jìn)行切換成大寫(xiě)(可選擇參數(shù):'none', 'sentences', 'words', 'characters')
none:不自動(dòng)切換任何字符成大寫(xiě)
sentences:默認(rèn)每個(gè)句子的首字母變成大寫(xiě)
words:每個(gè)單詞的首字母變成大寫(xiě)
characters:每個(gè)字母全部變成大寫(xiě)
3.3.autoCorrect? bool? 設(shè)置拼寫(xiě)自動(dòng)修正功能 默認(rèn)為開(kāi)啟(true)
3.4.autoFocus bool? 設(shè)置是否默認(rèn)獲取到焦點(diǎn)默認(rèn)為關(guān)閉(false)。該需要componentDidMount方法被調(diào)用之后才會(huì)獲取焦點(diǎn)哦(componentDidMount是React組件被渲染之后React主動(dòng)回調(diào)的方法)
3.5.defaultValue? string 給文本輸入設(shè)置一個(gè)默認(rèn)初始值咆蒿。
3.6.editable bool? 設(shè)置文本框是否可以編輯 默認(rèn)值為true,可以進(jìn)行編輯
3.7.keyboardType? 鍵盤類型(可選參數(shù):"default", 'email-address', 'numeric', 'phone-pad', "ascii-capable", 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') 該用來(lái)選擇默認(rèn)彈出鍵盤的類型例如我們甚至numeric就是彈出數(shù)字鍵盤东抹。鑒于平臺(tái)的原因如下的值是所有平臺(tái)都可以進(jìn)行通用的
default
numeric??????????? 數(shù)字鍵盤
email-address? 郵箱地址
3.8.maxLength? number? 可以限制文本輸入框最大的輸入字符長(zhǎng)度
3.9.multiline bool? 設(shè)置可以輸入多行文字,默認(rèn)為false(表示無(wú)論文本輸入多少沃测,都是單行顯示)
3.10.onBlur? function 監(jiān)聽(tīng)方法缭黔,文本框失去焦點(diǎn)回調(diào)方法
3.11.onChange function 監(jiān)聽(tīng)方法,文本框內(nèi)容發(fā)生改變回調(diào)方法
3.12.onChangeText? function監(jiān)聽(tīng)方法,文本框內(nèi)容發(fā)生改變回調(diào)方法蒂破,該方法會(huì)進(jìn)行傳遞文本內(nèi)容
3.13.onEndEditing? function監(jiān)聽(tīng)方法馏谨,當(dāng)文本結(jié)束文本輸入回調(diào)方法
3.14.onFocus? function 監(jiān)聽(tīng)方法? 文本框獲取到焦點(diǎn)回調(diào)方法
3.15.onLayout? function監(jiān)聽(tīng)方法? 組價(jià)布局發(fā)生變化的時(shí)候調(diào)用,調(diào)用方法參數(shù)為 {x,y,width,height}
3.16.onSubmitEditing function監(jiān)聽(tīng)方法附迷,當(dāng)編輯提交的時(shí)候回調(diào)方法惧互。不過(guò)如果multiline={true}的時(shí)候哎媚,該屬性就不生效
3.17.placeholder string 當(dāng)文本輸入框還沒(méi)有任何輸入的時(shí)候,默認(rèn)顯示信息壹哺,當(dāng)有輸入的時(shí)候該值會(huì)被清除
3.18.placeholderText Color? string 設(shè)置默認(rèn)信息顏色(placeholder)
3.19.secureTextEntry? bool 設(shè)置是否為密碼安全輸入框 抄伍,默認(rèn)為false
3.20.style 風(fēng)格屬性? 可以參考Text組件風(fēng)格
3.21.value? string 輸入框中的內(nèi)容值
以上是一些Android艘刚,iOS平臺(tái)通用的屬性管宵,下面根據(jù)官網(wǎng)的文檔,我這邊組要講解一下適用于Android平臺(tái)的屬性方法
3.22.numberOfLines number設(shè)置文本輸入框行數(shù)攀甚,該需要首先設(shè)置multiline為true,設(shè)置TextInput為多行文本箩朴。
3.23.textAlign 設(shè)置文本橫向布局方式 可選參數(shù)('start', 'center', 'end')
3.24.textAlignVertical 設(shè)置文本垂直方向布局方式 可選參數(shù)('top', 'center', 'bottom')
3.25.underlineColorAndroid? 設(shè)置文本輸入框下劃線的顏色
ProgressBarAndroid
屬性方法
3.1.支持View控件的屬性方法 (這些屬性是從View控件中繼承下來(lái))? 例如:大小,布局,邊距啊
3.2.color? 設(shè)置進(jìn)度的顏色屬性值
3.3.indeterminate 設(shè)置是否要顯示一個(gè)默認(rèn)的進(jìn)度信息,該如果styleAttr的風(fēng)格設(shè)置成Horizontal的時(shí)候該值必須設(shè)置成false
3.4.progress? number? 設(shè)置當(dāng)前的加載進(jìn)度值(該值在0-1之間)
3.5.styleAttr??? 進(jìn)度條框的風(fēng)格 秋度,可以取的值如下:
Horizontal
Small
Large
Inverse
SmallInverse
LargeInverse
Navigator
Navigator.SceneConfigs.PushFromRight (默認(rèn))
Navigator.SceneConfigs.FloatFromRight
Navigator.SceneConfigs.FloatFromLeft
Navigator.SceneConfigs.FloatFromBottom
Navigator.SceneConfigs.FloatFromBottomAndroid
Navigator.SceneConfigs.FadeAndroid
Navigator.SceneConfigs.HorizontalSwipeJump
Navigator.SceneConfigs.HorizontalSwipeJumpFromRight
Navigator.SceneConfigs.VerticalUpSwipeJump
Navigator.SceneConfigs.VerticalDownSwipeJump
ScrollView
屬性方法
3.1.View相關(guān)屬性樣式全部繼承(例如:寬和高,背景顏色,邊距等相關(guān)屬性樣式)
3.2.contentContainerStyle? 樣式風(fēng)格屬性(傳入StyleSheet創(chuàng)建的Style文件)炸庞。該樣式會(huì)作用于被ScrollView包裹的所有的子視圖。
3.3.horizontal?? 表示ScrollView是橫向滑動(dòng)還是縱向滑動(dòng)荚斯。該默認(rèn)為false表示縱向滑動(dòng)
3.4.keyboardDismissMode?? 枚舉類型表示鍵盤隱藏類型埠居,可選值('none', "interactive", 'on-drag')? 三個(gè)值的意義分別如下:
none? 默認(rèn)值,表示在進(jìn)行拖拽滑動(dòng)的時(shí)候不隱藏鍵盤
on-drag?? 表示在進(jìn)行拖拽滑動(dòng)開(kāi)始的時(shí)候隱藏鍵盤
interactive? 表示當(dāng)拖拽觸摸移動(dòng)的同時(shí)隱藏鍵盤事期,向上拖拽的時(shí)候取消隱藏滥壕。不過(guò)在Android平臺(tái)上面該選項(xiàng)不支持,所以會(huì)和'none'一樣的效果兽泣。
3.5.keyboardShouldPersistTaps? 該屬性默認(rèn)為false绎橘,表示如果當(dāng)前是textinput控件,并且鍵盤是彈出狀態(tài)的話唠倦,點(diǎn)擊textinput之外地方称鳞,會(huì)進(jìn)行隱藏鍵盤。反之不會(huì)有效果稠鼻,鍵盤還是成打開(kāi)狀態(tài)冈止。
3.6.onContentSizeChange? function? 該當(dāng)滾動(dòng)視圖的內(nèi)容尺寸大小發(fā)生變化的時(shí)候進(jìn)行調(diào)用
3.7.onScroll? function? 該方法在滾動(dòng)的時(shí)候每frame(幀)調(diào)用一次。該方法事件調(diào)用的頻率可以使用scrollEventThrottle屬性進(jìn)行設(shè)置候齿。
3.8.refreshControl?? element 設(shè)置元素控件靶瘸,該可以進(jìn)行指定RefreshControl組件。這樣可以為ScrollView添加下拉刷新的功能.
3.9.removeClippedSubviews? 測(cè)試屬性 當(dāng)該值為true的時(shí)候毛肋。在ScrollView視圖之外的視圖(該視圖的overflow屬性值必須要為hidden)會(huì)從被暫時(shí)移除怨咪,該設(shè)置可以提高滾動(dòng)的性能。
3.10.showsHorizontalScrollIndicator?? 該值設(shè)置是否需要顯示橫向滾動(dòng)指示條
3.11.showsVerticalScrollIndicator 該值設(shè)置是否需要顯示縱向滾動(dòng)指示條
3.12.sendMomentumEvents?? 當(dāng)ScrollView有onMomentumScrollBegin或者onMomentumScrollEnd方法設(shè)置润匙,該sendMomentumEvents值設(shè)置為true的時(shí)候诗眨。變化的事件信息會(huì)通過(guò)該Android框架自動(dòng)發(fā)送出來(lái),然后之前設(shè)置的方法進(jìn)行捕捉孕讳。
ToolbarAndroid
屬性方法
3.1.View相關(guān)屬性樣式全部繼承(例如:寬和高,背景顏色,邊距等相關(guān)屬性樣式)
3.2.actions 設(shè)置功能列表信息屬性 傳入的參數(shù)信息為: [{title: string, icon: optionalImageSource, show: enum('always', 'ifRoom', 'never'), showWithText: bool}] ??進(jìn)行設(shè)置功能菜單中的可用的相關(guān)功能匠楚。該會(huì)在顯示在組件的右側(cè)(顯示方式為圖標(biāo)或者文字)巍膘,如果界面上面區(qū)域已經(jīng)放不下了,該會(huì)加入到隱藏的菜單中(彈出進(jìn)行顯示)芋簿。該屬性的值是一組對(duì)象數(shù)組峡懈,每一個(gè)對(duì)象包括以下以下一些參數(shù):
title: 必須的,該功能的標(biāo)題
icon: 功能的圖標(biāo)? 采用該代碼進(jìn)行獲取 require('./some_icon.png')
show: 該設(shè)置圖標(biāo)直接顯示与斤,還是隱藏或者顯示在彈出菜單中肪康。always代表總是顯示,ifRoom代表如果Bar中控件夠進(jìn)行顯示,或者never代表使用直接不顯示
showWithText? boolean 進(jìn)行設(shè)置圖標(biāo)旁邊是否要顯示標(biāo)題信息
3.3.contentInSetEnd? number 該用于設(shè)置ToolBar的右邊和屏幕的右邊緣的間距撩穿。
3.4.contentInsetStart number 該用于設(shè)置ToolBar的左邊和屏幕的左邊緣的間距磷支。
3.5.logo? optionalImageSource? 可選圖片資源? 用于設(shè)置Toolbar的Logo圖標(biāo)
3.6.navIcon optionalImageSource 可選圖片資源 用于設(shè)置導(dǎo)航圖標(biāo)
3.7.onActionSelected function方法 當(dāng)我們的功能被選中的時(shí)候回調(diào)方法。該方法只會(huì)傳入唯一一個(gè)參數(shù):點(diǎn)擊功能在功能列表中的索引信息
3.8.onIconClicked function 當(dāng)圖標(biāo)被選中的時(shí)候回調(diào)方法
3.9.overflowIcon? optionalImageSource 可選圖片資源 設(shè)置功能列表中彈出菜單中的圖標(biāo)
3.10. rtl?? 設(shè)置toolbar中的功能順序是從右到左(RTL:Right To Left)食寡。為了讓該效果生效雾狈,你必須在Android應(yīng)用中的AndroidMainifest.xml中的application節(jié)點(diǎn)中添加android:supportsRtl="true",然后在你的主Activity(例如:MainActivity)的onCreate方法中調(diào)用如下代碼:setLayoutDirection(LayoutDirection.RTL)抵皱。
3.11.subtitle? string 設(shè)置toolbar的副標(biāo)題
3.12.subtitleColor? color? 設(shè)置設(shè)置toolbar的副標(biāo)題顏色
3.13.title string? 設(shè)置toolbar標(biāo)題
3.14.titleColor color 設(shè)置toolbar的標(biāo)題顏色
Switch
屬性方法
View相關(guān)屬性樣式全部繼承(例如:寬和高,背景顏色,邊距等相關(guān)屬性樣式)
disabled bool 如果該值為true,用戶就無(wú)法點(diǎn)擊switch開(kāi)關(guān)控件善榛,默認(rèn)為false
onValueChange function 方法,當(dāng)該組件的狀態(tài)值發(fā)生變化的時(shí)候回調(diào)方法
value bool 該開(kāi)關(guān)的值呻畸,如果該值為true的時(shí)候移盆,開(kāi)關(guān)呈打開(kāi)狀態(tài),默認(rèn)為false
Picker
屬性方法
View相關(guān)屬性樣式全部繼承(例如:寬和高,背景顏色,邊距等相關(guān)屬性樣式)
onValueChange? function方法,當(dāng)選擇器item被選擇的時(shí)候進(jìn)行調(diào)用擂错。該方法被調(diào)用的時(shí)候回傳入一下兩個(gè)參數(shù)
itemValue:該屬性值為被選中的item的屬性值
itemPosition:該選擇器被選中的item的索引position
selectedValue: any任何參數(shù)值味滞,選擇器選中的item所對(duì)應(yīng)的值,該可以是一個(gè)字符串或者一個(gè)數(shù)字
style pickerStyleType 該傳入style樣式钮呀,設(shè)置picker的樣式風(fēng)格
enabled bool 如果該值為false剑鞍,picker就無(wú)法被點(diǎn)擊選中。例如:用戶無(wú)法進(jìn)行做出選擇
mode enum ('dialog','dropdown')? 選擇器模式爽醋。在Android平臺(tái)上面蚁署,設(shè)置mode可以控制用戶點(diǎn)擊picker彈出的樣式風(fēng)格
'dialog': 該值為默認(rèn)值,進(jìn)行彈出一個(gè)模態(tài)dialog(彈出框)
'dropdown':以picker視圖為基礎(chǔ)蚂四,在該視圖下面彈出下拉框
prompt string? 設(shè)置picker的提示語(yǔ)(標(biāo)題),在Android平臺(tái)上面光戈,模式設(shè)置成'dialog',顯示彈出框的標(biāo)題
ViewPagerAndroid
View相關(guān)屬性樣式全部繼承(例如:寬和高,背景顏色,邊距等相關(guān)屬性樣式)
initialPage? number? ViewPagerAndroid初始索引頁(yè),不過(guò)我們可以使用setPage方法來(lái)更新頁(yè)碼遂赠,通過(guò)onPageSelected方法來(lái)監(jiān)聽(tīng)頁(yè)面滑動(dòng)久妆。
keyboardDismissMode? enum('none','on-drag')? 枚舉類型,進(jìn)行設(shè)置在拖拽滑動(dòng)的過(guò)程中是否要顯示鍵盤跷睦。
'none'? 默認(rèn)值,在拖拽中不隱藏鍵盤
'on-drag'?? 當(dāng)拖拽滑動(dòng)開(kāi)始的時(shí)候隱藏鍵盤
onPageScroll? function 方法筷弦,該方法在頁(yè)面進(jìn)行滑動(dòng)的時(shí)候執(zhí)行(不管是因?yàn)轫?yè)面滑動(dòng)動(dòng)畫(huà)原因還是由于頁(yè)面之間的拖拽以及滑動(dòng)原因).該會(huì)回調(diào)傳入的event.nativeEvent對(duì)象會(huì)有攜帶如下參數(shù):
'position'?? 從左起開(kāi)始第一個(gè)可見(jiàn)的頁(yè)面的索引
'offset'? 該value值的范圍為[0,1),該用來(lái)代表當(dāng)前頁(yè)面的卻換的狀態(tài)。值x代表該索引頁(yè)面(1-x)的范圍可見(jiàn)烂琴,另外x范圍代表下一個(gè)頁(yè)面可見(jiàn)的區(qū)域
onPageScrollStateChanged? function 該回調(diào)方法會(huì)在頁(yè)面滾動(dòng)狀態(tài)發(fā)生變化的時(shí)候進(jìn)行調(diào)用爹殊。頁(yè)面的滾動(dòng)狀態(tài)有下面三種情況:
'idle' 該表示當(dāng)前用戶和頁(yè)面滾動(dòng)沒(méi)有任何交互
'dragging'? 拖動(dòng)中,該表示當(dāng)前頁(yè)面正在被拖拽滑動(dòng)中
'settling'?? 該表示存在頁(yè)面拖拽或者滑動(dòng)的交互奸绷。頁(yè)面滾動(dòng)正在結(jié)束梗夸。并且正在關(guān)閉或者打開(kāi)動(dòng)畫(huà)。
onPageSelected? function 方法 該在頁(yè)面進(jìn)行拖拽滑動(dòng)切換完成之后回調(diào)号醉。該方法回調(diào)參數(shù)中的event.nativeEvent對(duì)象會(huì)攜帶如下一個(gè)屬性 : 'position'? 該屬性代表當(dāng)前選中的頁(yè)面的索引.
TouchableHighlight
TouchableNativeFeedback
TouchableOpacity
TouchableWithoutFeedback
屬性方法
accessibilityComponentType?? View.AccessibilityComponentType? 設(shè)置可訪問(wèn)的組件類型
accessibilityTraits View.AccessibilityTraits,[View.AccessibilityTraits] 設(shè)置訪問(wèn)特征
accessible? bool? 設(shè)置當(dāng)前組件是否可以訪問(wèn)
delayLongPress? number? 設(shè)置延遲的時(shí)間反症,單位為毫秒。從onPressIn方法開(kāi)始扣癣,到onLongPress被調(diào)用這一段時(shí)間
delayPressIn? number 設(shè)置延遲的時(shí)間惰帽,單位為毫秒憨降,從用戶觸摸控件開(kāi)始到onPressIn被調(diào)用這一段時(shí)間
delayPressOut? number 設(shè)置延遲的時(shí)間父虑,單位為毫秒,從用戶觸摸事件釋放開(kāi)始到onPressOut被調(diào)用這一段時(shí)間
onLayout? function? 當(dāng)組件加載或者改組件的布局發(fā)生變化的時(shí)候調(diào)用授药。調(diào)用傳入的參數(shù)為{nativeEvent:{layout:{x,y,width,height}}}
onLongPress function 方法士嚎,當(dāng)用戶長(zhǎng)時(shí)間按壓組件(長(zhǎng)按效果)的時(shí)候調(diào)用該方法
onPress function 方法 當(dāng)用戶點(diǎn)擊的時(shí)候調(diào)用(觸摸結(jié)束)。 但是如果事件被取消了就不會(huì)調(diào)用悔叽。(例如:當(dāng)前被滑動(dòng)事件所替代)
onPressIn? function? 用戶開(kāi)始觸摸組件回調(diào)方法
onPressOut function 用戶完成觸摸組件之后回調(diào)方法
pressRetentionOffset {top:number,left:number,bottom:number,right:number}?? 該設(shè)置當(dāng)視圖滾動(dòng)禁用的情況下莱衩,可以定義當(dāng)手指距離組件的距離。當(dāng)大于該距離該組件會(huì)失去響應(yīng)娇澎。當(dāng)少于該距離的時(shí)候笨蚁,該組件會(huì)重新進(jìn)行響應(yīng)。
ListView
屬性方法
ScrollView相關(guān)屬性樣式全部繼承
dataSource?? ListViewDataSource? 設(shè)置ListView的數(shù)據(jù)源
initialListSize? number? 進(jìn)行設(shè)置ListView組件剛剛加載的時(shí)候渲染的列表行數(shù)趟庄,用這個(gè)屬性確定首屏或者首頁(yè)加載的數(shù)量括细,而不是花大量的時(shí)間渲染加載很多頁(yè)面數(shù)據(jù),提高性能
onChangeVisibleRows? function? (visibleRows,changedRows)=>void戚啥。當(dāng)可見(jiàn)的行發(fā)生變化的時(shí)候回調(diào)該方法奋单。visibleRows參數(shù)對(duì)所有可見(jiàn)的行為{selectionID:{rowId:true}}的形式,changedRow參數(shù)對(duì)已經(jīng)改變可見(jiàn)的行為{selectionID:{rowID:true|false}}猫十。該值true代表可見(jiàn)览濒,false代表在視圖之外不可見(jiàn)的行。
onEndReachedThreshold? number 當(dāng)偏移量達(dá)到設(shè)置的臨界值調(diào)用onEndReached
onEndReached function 方法拖云,當(dāng)所有的數(shù)據(jù)項(xiàng)行被渲染之后贷笛,并且列表往下進(jìn)行滾動(dòng)。一直滾動(dòng)到距離底部onEndReachedThredshold設(shè)置的值進(jìn)行回調(diào)該方法宙项。原生的滾動(dòng)事件進(jìn)行傳遞(通過(guò)參數(shù)的形式)乏苦。
pageSize?? number 每一次事件的循環(huán)渲染的行數(shù)
removeClippedSubviews? bool? 該屬性用于提供大數(shù)據(jù)列表的滾動(dòng)性能。該使用的時(shí)候需要給每一行(row)的布局添加over:'hidden'樣式杉允。該屬性默認(rèn)是開(kāi)啟狀態(tài)邑贴。
renderFooter function 方法? ()=>renderable 席里,在每次渲染過(guò)程中頭和尾總會(huì)重新進(jìn)行渲染。如果發(fā)現(xiàn)該重新繪制的性能開(kāi)銷比較大的時(shí)候拢驾,可以使用StaticContainer容器或者其他合適的組件奖磁。在每一次渲染過(guò)程中Footer(尾)該會(huì)一直在列表的底部,header(頭)該會(huì)一直在列表的頭部
renderHeader? function 方法 使用情況和上面的renderFooter差不多
renderRow function 方法?? (rowData,sectionID,rowID,highlightRow)=>renderable?? 該方法有四個(gè)參數(shù)繁疤,其中分別為數(shù)據(jù)源中一條數(shù)據(jù)咖为,分組的ID,行的ID稠腊,以及標(biāo)記是否是高亮選中的狀態(tài)信息躁染。
renderScrollComponent function 方法 (props)=>renderable? 該方法可以返回一個(gè)可以滾動(dòng)的組件。默認(rèn)該會(huì)返回一個(gè)ScrollView
renderSectionHeader function (sectionData,sectionID)=>renderable?? 如果設(shè)置了該方法架忌,這樣會(huì)為每一個(gè)section渲染一個(gè)粘性的header視圖吞彤。該視圖粘性的效果是當(dāng)剛剛被渲染開(kāi)始的時(shí)候,該會(huì)處于對(duì)應(yīng)的內(nèi)容的頂部叹放,然后開(kāi)始滑動(dòng)的時(shí)候饰恕,該會(huì)跑到屏幕的頂端。直到滑動(dòng)到下一個(gè)section的header(頭)視圖井仰,然后被替代為止埋嵌。
renderSeparator function? (sectionID,rowID,adjacentRowHighlighted)=>renderable 如果設(shè)置該方法,會(huì)在被每一行的下面渲染一個(gè)組件作為分隔俱恶。除了每一個(gè)section分組的頭部視圖前面的最后一行雹嗦。
scrollRenderAheadDistance number? 進(jìn)行設(shè)置當(dāng)該行進(jìn)入屏幕多少像素以內(nèi)之后就開(kāi)始渲染該行
Cilpboard
使用范例:
async _setClipboardContent(){
Clipboard.setString('Hello World');try{varcontent =await Clipboard.getString();
ToastAndroid.show('粘貼板的內(nèi)容為:'+content,ToastAndroid.SHORT);
}catch(e) {
ToastAndroid.show(e.message,ToastAndroid.SHORT);
}
}
DatePickerAndroid
1.Promise open(options:Object)?? staitc,靜態(tài)方法,使用該方法進(jìn)行加載彈出一個(gè)標(biāo)準(zhǔn)的Android時(shí)間日期選擇器合是。該options(可選)參數(shù)有以下三種對(duì)象:
①:'date'?? 日期Date對(duì)象或者時(shí)間戳以毫秒單位-日期已默認(rèn)格式顯示
②:'minDate'? 日期Date對(duì)象或者時(shí)間戳以毫秒單位-可以選擇的最小時(shí)間
③:'maxDate' 日期Date對(duì)象或者時(shí)間戳以毫秒單位-可以選擇的最大時(shí)間
options ={date:this.state.maxDate,maxDate:newDate()}
2.dateSetAction() ,static靜態(tài)方法了罪,選擇時(shí)間日期選擇器
3.dismissedAction(),static靜態(tài)方法,關(guān)閉時(shí)間日期選擇器
async showPicker(stateKey, options) {try{varnewState ={};
const {action, year, month, day}=await DatePickerAndroid.open(options);if(action ===DatePickerAndroid.dismissedAction) {
newState[stateKey+ 'Text'] = 'dismissed';
}else{vardate =newDate(year, month, day);
newState[stateKey+ 'Text'] =date.toLocaleDateString();
newState[stateKey+ 'Date'] =date;
}this.setState(newState);
}catch({code, message}) {
console.warn(`Errorinexample '${stateKey}': `, message);
}
}
原文地址:http://www.cnblogs.com/Sweet-Candy/p/5695389.html