React-Native的基本控件屬性方法

http://www.cnblogs.com/Sweet-Candy/p/5695389.html

React-Native的基本控件屬性方法

對(duì)React-Native的學(xué)習(xí)寓落,從熟悉基本控件開始。

View

屬性方法

序號(hào)名稱屬性O(shè)r方法類型說明

1

accessibilityLabel屬性string

2

accessible

屬性bool

當(dāng)為true時(shí)荞下,表示該元素是可以進(jìn)行訪問伶选,

默認(rè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ā)仰税,不過界面可能不會(huì)立即刷新构资,

特別當(dāng)布局動(dòng)畫正在加載中的時(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)簽說明Style標(biāo)簽說明

FlexBox彈性布局(詳細(xì)點(diǎn)擊了解)transforms

動(dòng)畫屬性(詳細(xì)點(diǎn)擊了解)

backfaceVisibilityenum('visible', 'hidden')定義界面翻轉(zhuǎn)的

時(shí)候是否可見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)容超過容器顯示還是隱藏

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í)候的削咆,是否需要通過用戶牍疏,不過該只對(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)容超過了行數(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)圖片開始加載的時(shí)候調(diào)用該方法

5.resizeMode? 縮放比例,可選參數(shù)('cover', 'contain', 'stretch') 該當(dāng)圖片的尺寸超過布局的尺寸的時(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)畫??????????????? 3.resizeMode? 設(shè)置縮放模式

4.backgroundColor 背景顏色

5.borderColor???? 邊框顏色????????????? 6.borderWidth 邊框?qū)挾?/p>

7.borderRadius? 邊框圓角

8.overflow 設(shè)置圖片尺寸超過容器可以設(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)行切換成大寫(可選擇參數(shù):'none', 'sentences', 'words', 'characters')

none:不自動(dòng)切換任何字符成大寫

sentences:默認(rèn)每個(gè)句子的首字母變成大寫

words:每個(gè)單詞的首字母變成大寫

characters:每個(gè)字母全部變成大寫

3.3.autoCorrect? bool? 設(shè)置拼寫自動(dòng)修正功能 默認(rèn)為開啟(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') 該用來選擇默認(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(表示無論文本輸入多少值纱,都是單行顯示)

3.10.onBlur? function 監(jiān)聽方法,文本框失去焦點(diǎn)回調(diào)方法

3.11.onChange function 監(jiān)聽方法,文本框內(nèi)容發(fā)生改變回調(diào)方法

3.12.onChangeText? function監(jiān)聽方法坯汤,文本框內(nèi)容發(fā)生改變回調(diào)方法虐唠,該方法會(huì)進(jìn)行傳遞文本內(nèi)容

3.13.onEndEditing? function監(jiān)聽方法,當(dāng)文本結(jié)束文本輸入回調(diào)方法

3.14.onFocus? function 監(jiān)聽方法? 文本框獲取到焦點(diǎn)回調(diào)方法

3.15.onLayout? function監(jiān)聽方法? 組價(jià)布局發(fā)生變化的時(shí)候調(diào)用惰聂,調(diào)用方法參數(shù)為 {x,y,width,height}

3.16.onSubmitEditing function監(jiān)聽方法疆偿,當(dāng)編輯提交的時(shí)候回調(diào)方法咱筛。不過如果multiline={true}的時(shí)候,該屬性就不生效

3.17.placeholder string 當(dāng)文本輸入框還沒有任何輸入的時(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控件中繼承下來)? 例如:大小,布局,邊距啊

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)開始的時(shí)候隱藏鍵盤

interactive? 表示當(dāng)拖拽觸摸移動(dòng)的同時(shí)隱藏鍵盤值依,向上拖拽的時(shí)候取消隱藏圃泡。不過在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ì)有效果扮叨,鍵盤還是成打開狀態(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ì)通過該Android框架自動(dòng)發(fā)送出來瞧省,然后之前設(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,用戶就無法點(diǎn)擊switch開關(guān)控件,默認(rèn)為false

onValueChange function 方法建瘫,當(dāng)該組件的狀態(tài)值發(fā)生變化的時(shí)候回調(diào)方法

value bool 該開關(guān)的值崭捍,如果該值為true的時(shí)候,開關(guān)呈打開狀態(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就無法被點(diǎn)擊選中贮配。例如:用戶無法進(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的提示語(標(biāo)題),在Android平臺(tái)上面,模式設(shè)置成'dialog',顯示彈出框的標(biāo)題

ViewPagerAndroid

View相關(guān)屬性樣式全部繼承(例如:寬和高,背景顏色,邊距等相關(guān)屬性樣式)

initialPage? number? ViewPagerAndroid初始索引頁圆存,不過我們可以使用setPage方法來更新頁碼叼旋,通過onPageSelected方法來監(jiān)聽頁面滑動(dòng)。

keyboardDismissMode? enum('none','on-drag')? 枚舉類型沦辙,進(jìn)行設(shè)置在拖拽滑動(dòng)的過程中是否要顯示鍵盤夫植。

'none'? 默認(rèn)值,在拖拽中不隱藏鍵盤

'on-drag'?? 當(dāng)拖拽滑動(dòng)開始的時(shí)候隱藏鍵盤

onPageScroll? function 方法,該方法在頁面進(jìn)行滑動(dòng)的時(shí)候執(zhí)行(不管是因?yàn)轫撁婊瑒?dòng)動(dòng)畫原因還是由于頁面之間的拖拽以及滑動(dòng)原因).該會(huì)回調(diào)傳入的event.nativeEvent對(duì)象會(huì)有攜帶如下參數(shù):

'position'?? 從左起開始第一個(gè)可見的頁面的索引

'offset'? 該value值的范圍為[0,1)油讯,該用來代表當(dāng)前頁面的卻換的狀態(tài)详民。值x代表該索引頁面(1-x)的范圍可見延欠,另外x范圍代表下一個(gè)頁面可見的區(qū)域

onPageScrollStateChanged? function 該回調(diào)方法會(huì)在頁面滾動(dòng)狀態(tài)發(fā)生變化的時(shí)候進(jìn)行調(diào)用。頁面的滾動(dòng)狀態(tài)有下面三種情況:

'idle' 該表示當(dāng)前用戶和頁面滾動(dòng)沒有任何交互

'dragging'? 拖動(dòng)中沈跨,該表示當(dāng)前頁面正在被拖拽滑動(dòng)中

'settling'?? 該表示存在頁面拖拽或者滑動(dòng)的交互由捎。頁面滾動(dòng)正在結(jié)束。并且正在關(guān)閉或者打開動(dòng)畫饿凛。

onPageSelected? function 方法 該在頁面進(jìn)行拖拽滑動(dòng)切換完成之后回調(diào)狞玛。該方法回調(diào)參數(shù)中的event.nativeEvent對(duì)象會(huì)攜帶如下一個(gè)屬性 : 'position'? 該屬性代表當(dāng)前選中的頁面的索引.

TouchableHighlight

TouchableNativeFeedback

TouchableOpacity

TouchableWithoutFeedback

屬性方法

accessibilityComponentType?? View.AccessibilityComponentType? 設(shè)置可訪問的組件類型

accessibilityTraits View.AccessibilityTraits,[View.AccessibilityTraits] 設(shè)置訪問特征

accessible? bool? 設(shè)置當(dāng)前組件是否可以訪問

delayLongPress? number? 設(shè)置延遲的時(shí)間,單位為毫秒笤喳。從onPressIn方法開始为居,到onLongPress被調(diào)用這一段時(shí)間

delayPressIn? number 設(shè)置延遲的時(shí)間,單位為毫秒杀狡,從用戶觸摸控件開始到onPressIn被調(diào)用這一段時(shí)間

delayPressOut? number 設(shè)置延遲的時(shí)間蒙畴,單位為毫秒,從用戶觸摸事件釋放開始到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? 用戶開始觸摸組件回調(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è)屬性確定首屏或者首頁加載的數(shù)量永部,而不是花大量的時(shí)間渲染加載很多頁面數(shù)據(jù),提高性能

onChangeVisibleRows? function? (visibleRows,changedRows)=>void呐矾。當(dāng)可見的行發(fā)生變化的時(shí)候回調(diào)該方法苔埋。visibleRows參數(shù)對(duì)所有可見的行為{selectionID:{rowId:true}}的形式,changedRow參數(shù)對(duì)已經(jīng)改變可見的行為{selectionID:{rowID:true|false}}蜒犯。該值true代表可見组橄,false代表在視圖之外不可見的行。

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)行傳遞(通過參數(shù)的形式)瓮栗。

pageSize?? number 每一次事件的循環(huán)渲染的行數(shù)

removeClippedSubviews? bool? 該屬性用于提供大數(shù)據(jù)列表的滾動(dòng)性能。該使用的時(shí)候需要給每一行(row)的布局添加over:'hidden'樣式瞄勾。該屬性默認(rèn)是開啟狀態(tài)费奸。

renderFooter function 方法? ()=>renderable ,在每次渲染過程中頭和尾總會(huì)重新進(jìn)行渲染进陡。如果發(fā)現(xiàn)該重新繪制的性能開銷比較大的時(shí)候愿阐,可以使用StaticContainer容器或者其他合適的組件。在每一次渲染過程中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)剛剛被渲染開始的時(shí)候焚廊,該會(huì)處于對(duì)應(yīng)的內(nè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)之后就開始渲染該行

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);

}

}

標(biāo)簽:react-native,控件,屬性,方法

好文要頂關(guān)注我收藏該文

冬瓜小生

關(guān)注 - 1

粉絲 - 1

+加關(guān)注

0

0

?上一篇:React Native之ViewPagerAndroid跳轉(zhuǎn)頁面問題

?下一篇:React-Native錯(cuò)誤筆記-EPERM

posted @2016-07-22 15:36冬瓜小生閱讀(251) 評(píng)論(0)編輯收藏

刷新評(píng)論刷新頁面返回頂部

注冊(cè)用戶登錄后才能發(fā)表評(píng)論泄隔,請(qǐng)登錄注冊(cè)訪問網(wǎng)站首頁宛徊。

【推薦】50萬行VC++源碼: 大型組態(tài)工控佛嬉、電力仿真CAD與GIS源碼庫

【鏈接】融云阿里云大咖面對(duì)面 :教你玩轉(zhuǎn)直播風(fēng)口

【推薦】報(bào)表開發(fā)有捷徑:快速設(shè)計(jì)輕松集成,數(shù)據(jù)可視化和交互

【推薦】一個(gè)月僅用630元賺取15000元闸天,學(xué)會(huì)投資

【推薦】網(wǎng)易云信-一天開發(fā)一個(gè)微信暖呕,獨(dú)創(chuàng)1對(duì)1技術(shù)顧問讓開發(fā)加速

最新IT新聞:

·美國(guó)金融學(xué)教授:Uber估值被高估一倍多 實(shí)際價(jià)值280億美元

·聯(lián)想集團(tuán)第二季度營(yíng)收101億美元 凈利1.73億美元

·58同城發(fā)布Q2財(cái)報(bào) 連續(xù)5季度虧損后再次盈利

·諾基亞借品牌授權(quán)回歸手機(jī)市場(chǎng) 勝算幾何?

·英特爾將推Type-C新規(guī)范 徹底拋棄3.5mm耳機(jī)接口

?更多新聞...

最新知識(shí)庫文章:

·程序猿媳婦兒注意事項(xiàng)

·可是姑娘苞氮,你為什么要編程呢湾揽?

·知其所以然(以算法學(xué)習(xí)為例)

·如何給變量取個(gè)簡(jiǎn)短且無歧義的名字

·編程的智慧

?更多知識(shí)庫文章...

昵稱:冬瓜小生

園齡:1年9個(gè)月

粉絲:1

關(guān)注:1

+加關(guān)注

<2016年8月>

日一二三四五六

31123456

78910111213

14151617181920

21222324252627

28293031123

45678910

搜索

常用鏈接

我的隨筆

我的評(píng)論

我的參與

最新評(píng)論

我的標(biāo)簽

更多鏈接

我的標(biāo)簽

react-native(3)

android(3)

EPERM(1)

GridView(1)

Item錯(cuò)亂(1)

adapter(1)

service(1)

setPage(1)

ViewPagerAndroid(1)

長(zhǎng)按刪除(1)

更多

隨筆檔案

2016年8月 (1)

2016年7月 (3)

2015年12月 (1)

2015年7月 (1)

2015年5月 (1)

2014年11月 (2)

最新評(píng)論

1. Re:React Native之ViewPagerAndroid跳轉(zhuǎn)頁面問題

你能保證這個(gè)代碼有用嗎?

--naruto丶陽

2. Re:關(guān)于GrideView Item點(diǎn)擊后出現(xiàn)錯(cuò)亂重疊的情況

@碼魂不好意思 有段時(shí)間沒上~我代碼 在 onAnimationEnd 的時(shí)候改變了位置 讓他停留在我移動(dòng)動(dòng)畫的最后地方~...

--冬瓜小生

3. Re:關(guān)于GrideView Item點(diǎn)擊后出現(xiàn)錯(cuò)亂重疊的情況

有兩種動(dòng)畫

--碼魂

4. Re:關(guān)于GrideView Item點(diǎn)擊后出現(xiàn)錯(cuò)亂重疊的情況

動(dòng)畫效果只是效果,元素開始在哪它就在哪.

--碼魂

5. Re:小生經(jīng)驗(yàn)貼 --- adapter的數(shù)據(jù)更新

之前除了點(diǎn)錯(cuò),現(xiàn)在改正了

--冬瓜小生

閱讀排行榜

1. React-Native的基本控件屬性方法(251)

2. 小生功能貼<一> --- 動(dòng)態(tài)添加應(yīng)用 具有長(zhǎng)按刪除功能(138)

3. 關(guān)于GrideView Item點(diǎn)擊后出現(xiàn)錯(cuò)亂重疊的情況(88)

4. React Native之ViewPagerAndroid跳轉(zhuǎn)頁面問題(75)

5. 小生經(jīng)驗(yàn)貼 --- adapter的數(shù)據(jù)更新(70)

評(píng)論排行榜

1. 關(guān)于GrideView Item點(diǎn)擊后出現(xiàn)錯(cuò)亂重疊的情況(3)

2. 小生經(jīng)驗(yàn)貼 --- adapter的數(shù)據(jù)更新(1)

3. React Native之ViewPagerAndroid跳轉(zhuǎn)頁面問題(1)

推薦排行榜

1. Android應(yīng)用中-更新提示顯示紅點(diǎn)的方案(1)

Copyright ?2016 冬瓜小生

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末库物,一起剝皮案震驚了整個(gè)濱河市北救,隨后出現(xiàn)的幾起案子原献,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 219,589評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件疗绣,死亡現(xiàn)場(chǎng)離奇詭異池颈,居然都是意外死亡凡涩,警方通過查閱死者的電腦和手機(jī)搂鲫,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,615評(píng)論 3 396
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來潜必,“玉大人靴姿,你說我怎么就攤上這事〈殴觯” “怎么了佛吓?”我有些...
    開封第一講書人閱讀 165,933評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)恨旱。 經(jīng)常有香客問我辈毯,道長(zhǎng),這世上最難降的妖魔是什么搜贤? 我笑而不...
    開封第一講書人閱讀 58,976評(píng)論 1 295
  • 正文 為了忘掉前任谆沃,我火速辦了婚禮,結(jié)果婚禮上仪芒,老公的妹妹穿的比我還像新娘唁影。我一直安慰自己,他們只是感情好掂名,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,999評(píng)論 6 393
  • 文/花漫 我一把揭開白布据沈。 她就那樣靜靜地躺著,像睡著了一般饺蔑。 火紅的嫁衣襯著肌膚如雪锌介。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,775評(píng)論 1 307
  • 那天猾警,我揣著相機(jī)與錄音孔祸,去河邊找鬼。 笑死发皿,一個(gè)胖子當(dāng)著我的面吹牛崔慧,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播穴墅,決...
    沈念sama閱讀 40,474評(píng)論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼惶室,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼温自!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起皇钞,我...
    開封第一講書人閱讀 39,359評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤悼泌,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后鹅士,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體券躁,經(jīng)...
    沈念sama閱讀 45,854評(píng)論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,007評(píng)論 3 338
  • 正文 我和宋清朗相戀三年掉盅,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片以舒。...
    茶點(diǎn)故事閱讀 40,146評(píng)論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡趾痘,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出蔓钟,到底是詐尸還是另有隱情永票,我是刑警寧澤,帶...
    沈念sama閱讀 35,826評(píng)論 5 346
  • 正文 年R本政府宣布滥沫,位于F島的核電站侣集,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏兰绣。R本人自食惡果不足惜世分,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,484評(píng)論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望缀辩。 院中可真熱鬧臭埋,春花似錦、人聲如沸臀玄。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,029評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽健无。三九已至荣恐,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間累贤,已是汗流浹背叠穆。 一陣腳步聲響...
    開封第一講書人閱讀 33,153評(píng)論 1 272
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留畦浓,地道東北人痹束。 一個(gè)月前我還...
    沈念sama閱讀 48,420評(píng)論 3 373
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像讶请,于是被迫代替她去往敵國(guó)和親祷嘶。 傳聞我的和親對(duì)象是個(gè)殘疾皇子屎媳,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,107評(píng)論 2 356

推薦閱讀更多精彩內(nèi)容

  • 對(duì)React-Native的學(xué)習(xí),從熟悉基本控件開始论巍。 View 屬性方法 序號(hào)名稱屬性O(shè)r方法類型說明 1 ac...
    諾花生閱讀 876評(píng)論 0 0
  • React-Native的基本控件屬性方法 對(duì)React-Native的學(xué)習(xí)烛谊,從熟悉基本控件開始。 View 屬性...
    探路者1202閱讀 1,081評(píng)論 0 2
  • 最近在研究React-Native嘉汰,把該配置的環(huán)境都配置了一遍丹禀,HelloWorld跑起來了之后,現(xiàn)在開始學(xué)習(xí)鞋怀、熟...
    小朱v閱讀 962評(píng)論 0 1
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理双泪,服務(wù)發(fā)現(xiàn),斷路器密似,智...
    卡卡羅2017閱讀 134,672評(píng)論 18 139
  • ¥開啟¥ 【iAPP實(shí)現(xiàn)進(jìn)入界面執(zhí)行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開一個(gè)線程焙矛,因...
    小菜c閱讀 6,432評(píng)論 0 17