最近在研究React-Native,把該配置的環(huán)境都配置了一遍税稼,HelloWorld跑起來了之后烦秩,
現(xiàn)在開始學(xué)習(xí)垮斯、熟悉基本控件了,并記錄保存下來只祠,以備隨時查找兜蠕。
View
屬性方法
序號 | 名稱 | 屬性O(shè)r方法 | 類型 | 說明 |
---|---|---|---|---|
1 | accessibilityLabel | 屬性 | string | |
2 | accessible | 屬性 | bool | 當(dāng)為true時,表示該元素是可以進行訪問抛寝,默認(rèn)情況下所有可觸摸的元素控件都是可以訪問的 |
3 | onAccessibilityTap | 方法 | function | 該當(dāng)accessible為true的時候并且用戶對控件View做了一個Tap(輕輕的觸摸或者點擊)的手勢 |
4 | onLayout | 方法 | function | 當(dāng)組件的布局發(fā)生變動的時候熊杨,會自動調(diào)用下面的方法:{nativeEvent: { layout: {x, y, width, height}}}。該事件當(dāng)重新計算布局的時候會立即進行觸發(fā)盗舰,不過界面可能不會立即刷新晶府,特別當(dāng)布局動畫正在加載中的時候。 |
5 | onMagicTap | 方法 | function | 當(dāng)accessible為true的時候岭皂,當(dāng)用戶雙指點擊(Magic Tap)的時候郊霎,進行觸發(fā) |
風(fēng)格樣式
在React Native中的Style風(fēng)格布局,其實和CSS樣式有很多相似的地方爷绘,這邊介紹一下:
Style標(biāo)簽 | 說明 | Style標(biāo)簽 | 說明 |
---|---|---|---|
FlexBox | 彈性布局(詳細點擊了解) | transforms | 動畫屬性(詳細點擊了解) |
backfaceVisibility | enum('visible', 'hidden')定義界面翻轉(zhuǎn)的時候是否可見 | backgroundColor | 背景顏色 |
borderColor | 邊框顏色,這邊幾個就是代表上下左右變寬的顏色borderTopColor,borderRightColor, borderBottomColor,borderLeftColor |
borderRadius | 邊框圓角大小书劝,其他幾個是上下左右邊框圓角.borderTopLeftRadius,borderTopRightRadius, borderBottomLeftRadius,borderBottomRightRadius |
borderStyle | 邊框線的風(fēng)格,這個和CSS樣式一樣的 ,enum('solid', 'dotted', 'dashed') |
borderWidth | 邊框?qū)挾龋硗馑膫€是上下左右的邊框?qū)挾?borderTopWidth土至,borderRightWidth购对,borderBottomWidth,borderLeftWidth |
opacity | 設(shè)置透明度 | overflow | 設(shè)置內(nèi)容超過容器顯示還是隱藏 |
elevation | 高度陶因,設(shè)置Z軸骡苞,可以產(chǎn)生立體效果 |
下面是幾個特殊的屬性,這邊直接介紹所有平臺通用以及只在Android平臺有效果的屬性
①.testID (全平臺)
可以根據(jù)該testID在測試的時候定位該View
②:accessibilityComponentType(android平臺)
定義是否該UI組件和原生組件一致化處理
③.accessibilityLiveRegion enum('none','polite','assertive') (android平臺)
該當(dāng)View發(fā)生更新時候的楷扬,是否需要通過用戶解幽,不過該只對Android4.4以及以上的平臺設(shè)備有效果
④.collapsable (android平臺)
布局合并優(yōu)化使用
⑤.importantForAccessibility enum('auto', 'yes', 'no', 'no-hide-descendants') (android平臺)
設(shè)置視圖響應(yīng)事件等級
⑥.needsOffscreenAlphaCompositing (android平臺)
設(shè)置View是否需要渲染和半透明度效果處理的先后次序。
⑦.renderToHardwareTextureAndroid (android)
設(shè)置是否需要GPU進行渲染
Text
屬性方法(主要一些可用的屬性)
①.allowFontScaling (bool):控制字體是否根據(jù)iOS的設(shè)置進行自動縮放-iOS平臺,Android平臺不適用
②.numberOfLines (number):進行設(shè)置Text顯示文本的行數(shù)烘苹,如果顯示的內(nèi)容超過了行數(shù)躲株,默認(rèn)其他多余的信息就不會顯示了。
③.onLayout (function) 當(dāng)布局位置發(fā)生變動的時候自動進行觸發(fā)該方法, 其中該function的參數(shù)如下:
[code lang="" start="" highlight=""]{nativeEvent: {layout: {x, y, width, height}}}[/code]
④.onPress (fcuntion) 該方法當(dāng)文本發(fā)生點擊的時候調(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 字體粗細權(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 文本對其方式("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ā)生改變的镣衡,會進行調(diào)用該方法霜定,調(diào)用的代碼為:
{nativeEvent: {layout: {x, y, width, height}}}.
2.onLoad (function):當(dāng)圖片加載成功之后,回調(diào)該方法
3.onLoadEnd (function):當(dāng)圖片加載失敗回調(diào)該方法廊鸥,該不會管圖片加載成功還是失敗
4.onLoadStart (fcuntion):當(dāng)圖片開始加載的時候調(diào)用該方法
5.resizeMode 縮放比例,可選參數(shù)('cover', 'contain', 'stretch') 該當(dāng)圖片的尺寸超過布局的尺寸的時候望浩,會根據(jù)設(shè)置Mode進行縮放或者裁剪圖片
6.source {uri:string} 進行標(biāo)記圖片的引用,該參數(shù)可以為一個網(wǎng)絡(luò)url地址或者一個本地的路徑
樣式風(fēng)格
1.FlexBox 支持彈性盒子風(fēng)格
2.Transforms 支持屬性動畫 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
屬性方法(這邊講解平臺公用以及Android生效的屬性方法)
3.1.View 支持View的相關(guān)屬性
3.2.autoCapitalize 控制TextInput輸入的字符進行切換成大寫(可選擇參數(shù):'none', 'sentences', 'words', 'characters')
- none:不自動切換任何字符成大寫
- sentences:默認(rèn)每個句子的首字母變成大寫
- words:每個單詞的首字母變成大寫
- characters:每個字母全部變成大寫
3.3.autoCorrect bool 設(shè)置拼寫自動修正功能 默認(rèn)為開啟(true)
3.4.autoFocus bool 設(shè)置是否默認(rèn)獲取到焦點默認(rèn)為關(guān)閉(false)惰说。該需要componentDidMount方法被調(diào)用之后才會獲取焦點哦(componentDidMount是React組件被渲染之后React主動回調(diào)的方法)
3.5.defaultValue string 給文本輸入設(shè)置一個默認(rèn)初始值磨德。
3.6.editable bool 設(shè)置文本框是否可以編輯 默認(rèn)值為true,可以進行編輯
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ù)字鍵盤。鑒于平臺的原因如下的值是所有平臺都可以進行通用的
- default
- numeric 數(shù)字鍵盤
- email-address 郵箱地址
3.8.maxLength number 可以限制文本輸入框最大的輸入字符長度
3.9.multiline bool 設(shè)置可以輸入多行文字吆视,默認(rèn)為false(表示無論文本輸入多少剖张,都是單行顯示)
3.10.onBlur function 監(jiā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)方法搔弄,該方法會進行傳遞文本內(nèi)容
3.13.onEndEditing function監(jiān)聽方法幅虑,當(dāng)文本結(jié)束文本輸入回調(diào)方法
3.14.onFocus function 監(jiān)聽方法 文本框獲取到焦點回調(diào)方法
3.15.onLayout function監(jiān)聽方法 組價布局發(fā)生變化的時候調(diào)用,調(diào)用方法參數(shù)為 {x,y,width,height}
3.16.onSubmitEditing function監(jiān)聽方法顾犹,當(dāng)編輯提交的時候回調(diào)方法倒庵。不過如果multiline={true}的時候,該屬性就不生效
3.17.placeholder string 當(dāng)文本輸入框還沒有任何輸入的時候炫刷,默認(rèn)顯示信息擎宝,當(dāng)有輸入的時候該值會被清除
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平臺通用的屬性绍申,下面根據(jù)官網(wǎng)的文檔,我這邊組要講解一下適用于Android平臺的屬性方法
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è)置進度的顏色屬性值
3.3.indeterminate 設(shè)置是否要顯示一個默認(rèn)的進度信息涨享,該如果styleAttr的風(fēng)格設(shè)置成Horizontal的時候該值必須設(shè)置成false
3.4.progress number 設(shè)置當(dāng)前的加載進度值(該值在0-1之間)
3.5.styleAttr 進度條框的風(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文件)奔脐。該樣式會作用于被ScrollView包裹的所有的子視圖。
3.3.horizontal 表示ScrollView是橫向滑動還是縱向滑動髓迎。該默認(rèn)為false表示縱向滑動
3.4.keyboardDismissMode 枚舉類型表示鍵盤隱藏類型建丧,可選值('none', "interactive", 'on-drag') 三個值的意義分別如下:
- none 默認(rèn)值排龄,表示在進行拖拽滑動的時候不隱藏鍵盤
- on-drag 表示在進行拖拽滑動開始的時候隱藏鍵盤
- interactive 表示當(dāng)拖拽觸摸移動的同時隱藏鍵盤,向上拖拽的時候取消隱藏茶鹃。不過在Android平臺上面該選項不支持艰亮,所以會和'none'一樣的效果迄埃。
3.5.keyboardShouldPersistTaps 該屬性默認(rèn)為false,表示如果當(dāng)前是textinput控件蕉汪,并且鍵盤是彈出狀態(tài)的話,點擊textinput之外地方者疤,會進行隱藏鍵盤驹马。反之不會有效果,鍵盤還是成打開狀態(tài)算利。
3.6.onContentSizeChange function 該當(dāng)滾動視圖的內(nèi)容尺寸大小發(fā)生變化的時候進行調(diào)用
3.7.onScroll function 該方法在滾動的時候每frame(幀)調(diào)用一次泳姐。該方法事件調(diào)用的頻率可以使用scrollEventThrottle屬性進行設(shè)置胖秒。
3.8.refreshControl element 設(shè)置元素控件,該可以進行指定RefreshControl組件较锡。這樣可以為ScrollView添加下拉刷新的功能.
3.9.removeClippedSubviews 測試屬性 當(dāng)該值為true的時候盗痒。在ScrollView視圖之外的視圖(該視圖的overflow屬性值必須要為hidden)會從被暫時移除俯邓,該設(shè)置可以提高滾動的性能。
3.10.showsHorizontalScrollIndicator 該值設(shè)置是否需要顯示橫向滾動指示條
3.11.showsVerticalScrollIndicator 該值設(shè)置是否需要顯示縱向滾動指示條
3.12.sendMomentumEvents 當(dāng)ScrollView有onMomentumScrollBegin或者onMomentumScrollEnd方法設(shè)置鸟整,該sendMomentumEvents值設(shè)置為true的時候朦蕴。變化的事件信息會通過該Android框架自動發(fā)送出來吩抓,然后之前設(shè)置的方法進行捕捉。
ToolbarAndroid
屬性方法
3.1.View相關(guān)屬性樣式全部繼承(例如:寬和高,背景顏色,邊距等相關(guān)屬性樣式)
3.2.actions 設(shè)置功能列表信息屬性 傳入的參數(shù)信息為: [{title: string, icon: optionalImageSource, show: enum('always', 'ifRoom', 'never'), showWithText: bool}] 進行設(shè)置功能菜單中的可用的相關(guān)功能伴栓。該會在顯示在組件的右側(cè)(顯示方式為圖標(biāo)或者文字),如果界面上面區(qū)域已經(jīng)放不下了惑淳,該會加入到隱藏的菜單中(彈出進行顯示)歧焦。該屬性的值是一組對象數(shù)組短荐,每一個對象包括以下以下一些參數(shù):
- title: 必須的,該功能的標(biāo)題
- icon: 功能的圖標(biāo) 采用該代碼進行獲取 require('./some_icon.png')
- show: 該設(shè)置圖標(biāo)直接顯示痕貌,還是隱藏或者顯示在彈出菜單中舵稠。always代表總是顯示,ifRoom代表如果Bar中控件夠進行顯示入宦,或者never代表使用直接不顯示
- showWithText boolean 進行設(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)我們的功能被選中的時候回調(diào)方法轿钠。該方法只會傳入唯一一個參數(shù):點擊功能在功能列表中的索引信息
3.8.onIconClicked function 當(dāng)圖標(biāo)被選中的時候回調(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é)點中添加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,用戶就無法點擊switch開關(guān)控件涮总,默認(rèn)為false
- onValueChange function 方法荠割,當(dāng)該組件的狀態(tài)值發(fā)生變化的時候回調(diào)方法
- value bool 該開關(guān)的值蔑鹦,如果該值為true的時候,開關(guān)呈打開狀態(tài)铺纽,默認(rèn)為false
Picker
屬性方法
- View相關(guān)屬性樣式全部繼承(例如:寬和高,背景顏色,邊距等相關(guān)屬性樣式)
- onValueChange function方法,當(dāng)選擇器item被選擇的時候進行調(diào)用狡门。該方法被調(diào)用的時候回傳入一下兩個參數(shù)
itemValue:該屬性值為被選中的item的屬性值
itemPosition:該選擇器被選中的item的索引position
- selectedValue: any任何參數(shù)值锅很,選擇器選中的item所對應(yīng)的值爆安,該可以是一個字符串或者一個數(shù)字
- style pickerStyleType 該傳入style樣式,設(shè)置picker的樣式風(fēng)格
- enabled bool 如果該值為false褐奥,picker就無法被點擊選中翘簇。例如:用戶無法進行做出選擇
- mode enum ('dialog','dropdown') 選擇器模式版保。在Android平臺上面,設(shè)置mode可以控制用戶點擊picker彈出的樣式風(fēng)格
'dialog': 該值為默認(rèn)值蹈垢,進行彈出一個模態(tài)dialog(彈出框)
'dropdown':以picker視圖為基礎(chǔ)袖裕,在該視圖下面彈出下拉框
- prompt string 設(shè)置picker的提示語(標(biāo)題),在Android平臺上面急鳄,模式設(shè)置成'dialog',顯示彈出框的標(biāo)題
ViewPagerAndroid
- View相關(guān)屬性樣式全部繼承(例如:寬和高,背景顏色,邊距等相關(guān)屬性樣式)
- initialPage number ViewPagerAndroid初始索引頁疾宏,不過我們可以使用setPage方法來更新頁碼,通過onPageSelected方法來監(jiān)聽頁面滑動为牍。
- keyboardDismissMode enum('none','on-drag') 枚舉類型,進行設(shè)置在拖拽滑動的過程中是否要顯示鍵盤抖韩。
'none' 默認(rèn)值,在拖拽中不隱藏鍵盤
'on-drag' 當(dāng)拖拽滑動開始的時候隱藏鍵盤
- onPageScroll function 方法茂浮,該方法在頁面進行滑動的時候執(zhí)行(不管是因為頁面滑動動畫原因還是由于頁面之間的拖拽以及滑動原因).該會回調(diào)傳入的event.nativeEvent對象會有攜帶如下參數(shù):
'position' 從左起開始第一個可見的頁面的索引
'offset' 該value值的范圍為[0,1)壳咕,該用來代表當(dāng)前頁面的卻換的狀態(tài)谓厘。值x代表該索引頁面(1-x)的范圍可見,另外x范圍代表下一個頁面可見的區(qū)域
- onPageScrollStateChanged function 該回調(diào)方法會在頁面滾動狀態(tài)發(fā)生變化的時候進行調(diào)用新翎。頁面的滾動狀態(tài)有下面三種情況:
'idle' 該表示當(dāng)前用戶和頁面滾動沒有任何交互
'dragging' 拖動中住练,該表示當(dāng)前頁面正在被拖拽滑動中
'settling' 該表示存在頁面拖拽或者滑動的交互讲逛。頁面滾動正在結(jié)束。并且正在關(guān)閉或者打開動畫盏混。
- onPageSelected function 方法 該在頁面進行拖拽滑動切換完成之后回調(diào)许赃。該方法回調(diào)參數(shù)中的event.nativeEvent對象會攜帶如下一個屬性 : '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è)置延遲的時間混聊,單位為毫秒。從onPressIn方法開始预愤,到onLongPress被調(diào)用這一段時間
- delayPressIn number 設(shè)置延遲的時間咳胃,單位為毫秒展懈,從用戶觸摸控件開始到onPressIn被調(diào)用這一段時間
- delayPressOut number 設(shè)置延遲的時間供璧,單位為毫秒嗜傅,從用戶觸摸事件釋放開始到onPressOut被調(diào)用這一段時間
- onLayout function 當(dāng)組件加載或者改組件的布局發(fā)生變化的時候調(diào)用檩赢。調(diào)用傳入的參數(shù)為{nativeEvent:{layout:{x,y,width,height}}}
- onLongPress function 方法贞瞒,當(dāng)用戶長時間按壓組件(長按效果)的時候調(diào)用該方法
- onPress function 方法 當(dāng)用戶點擊的時候調(diào)用(觸摸結(jié)束)趁曼。 但是如果事件被取消了就不會調(diào)用挡闰。(例如:當(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)大于該距離該組件會失去響應(yīng)申钩。當(dāng)少于該距離的時候瘪阁,該組件會重新進行響應(yīng)管跺。
ListView
屬性方法
- ScrollView相關(guān)屬性樣式全部繼承
- dataSource ListViewDataSource 設(shè)置ListView的數(shù)據(jù)源
- initialListSize number 進行設(shè)置ListView組件剛剛加載的時候渲染的列表行數(shù)豁跑,用這個屬性確定首屏或者首頁加載的數(shù)量,而不是花大量的時間渲染加載很多頁面數(shù)據(jù)火的,提高性能
- onChangeVisibleRows function (visibleRows,changedRows)=>void淑倾。當(dāng)可見的行發(fā)生變化的時候回調(diào)該方法娇哆。visibleRows參數(shù)對所有可見的行為{selectionID:{rowId:true}}的形式勃救,changedRow參數(shù)對已經(jīng)改變可見的行為{selectionID:{rowID:true|false}}蒙秒。該值true代表可見晕讲,false代表在視圖之外不可見的行马澈。
- onEndReachedThreshold number 當(dāng)偏移量達到設(shè)置的臨界值調(diào)用onEndReached
- onEndReached function 方法,當(dāng)所有的數(shù)據(jù)項行被渲染之后勤婚,并且列表往下進行滾動馒胆。一直滾動到距離底部onEndReachedThredshold設(shè)置的值進行回調(diào)該方法凝果。原生的滾動事件進行傳遞(通過參數(shù)的形式)器净。
- pageSize number 每一次事件的循環(huán)渲染的行數(shù)
- removeClippedSubviews bool 該屬性用于提供大數(shù)據(jù)列表的滾動性能。該使用的時候需要給每一行(row)的布局添加over:'hidden'樣式四啰。該屬性默認(rèn)是開啟狀態(tài)柑晒。
- renderFooter function 方法 ()=>renderable 眷射,在每次渲染過程中頭和尾總會重新進行渲染妖碉。如果發(fā)現(xiàn)該重新繪制的性能開銷比較大的時候,可以使用StaticContainer容器或者其他合適的組件坐榆。在每一次渲染過程中Footer(尾)該會一直在列表的底部席镀,header(頭)該會一直在列表的頭部
- renderHeader function 方法 使用情況和上面的renderFooter差不多
- renderRow function 方法 (rowData,sectionID,rowID,highlightRow)=>renderable 該方法有四個參數(shù),其中分別為數(shù)據(jù)源中一條數(shù)據(jù)顶捷,分組的ID服赎,行的ID交播,以及標(biāo)記是否是高亮選中的狀態(tài)信息堪侯。
- renderScrollComponent function 方法 (props)=>renderable 該方法可以返回一個可以滾動的組件荔仁。默認(rèn)該會返回一個ScrollView
- renderSectionHeader function (sectionData,sectionID)=>renderable 如果設(shè)置了該方法乏梁,這樣會為每一個section渲染一個粘性的header視圖。該視圖粘性的效果是當(dāng)剛剛被渲染開始的時候卖毁,該會處于對應(yīng)的內(nèi)容的頂部亥啦,然后開始滑動的時候翔脱,該會跑到屏幕的頂端媒鼓。直到滑動到下一個section的header(頭)視圖绿鸣,然后被替代為止。
- renderSeparator function (sectionID,rowID,adjacentRowHighlighted)=>renderable 如果設(shè)置該方法亮蛔,會在被每一行的下面渲染一個組件作為分隔尔邓。除了每一個section分組的頭部視圖前面的最后一行。
- scrollRenderAheadDistance number 進行設(shè)置當(dāng)該行進入屏幕多少像素以內(nèi)之后就開始渲染該行
Cilpboard
使用范例:
async _setClipboardContent(){
Clipboard.setString('Hello World');
try {
var content = await Clipboard.getString();
ToastAndroid.show('粘貼板的內(nèi)容為:'+content,ToastAndroid.SHORT);
} catch (e) {
ToastAndroid.show(e.message,ToastAndroid.SHORT);
}
}
DatePickerAndroid
1.Promise<Object> open(options:Object) staitc,靜態(tài)方法齿尽,使用該方法進行加載彈出一個標(biāo)準(zhǔn)的Android時間日期選擇器循头。該options(可選)參數(shù)有以下三種對象:
①:'date' 日期Date對象或者時間戳以毫秒單位-日期已默認(rèn)格式顯示
②:'minDate' 日期Date對象或者時間戳以毫秒單位-可以選擇的最小時間
③:'maxDate' 日期Date對象或者時間戳以毫秒單位-可以選擇的最大時間
options = {``date``:
this.``state``.maxDate``,``maxDate``:``new
Date``(``)``}
2.dateSetAction() ,static靜態(tài)方法卡骂,選擇時間日期選擇器
3.dismissedAction(),static靜態(tài)方法形入,關(guān)閉時間日期選擇器
async showPicker(stateKey, options) {
try {
var newState = {};
const {action, year, month, day} = await DatePickerAndroid.open(options);
if (action === DatePickerAndroid.dismissedAction) {
newState[stateKey + 'Text'] = 'dismissed';
} else {
var date = new Date(year, month, day);
newState[stateKey + 'Text'] = date.toLocaleDateString();
newState[stateKey + 'Date'] = date;
}
this.setState(newState);
} catch ({code, message}) {
console.warn(`Error in example '${stateKey}': `, message);
}
}