對React-Native的學習，從熟悉基本控件開始。
View
屬性方法
序號名稱屬性Or方法類型說明
1
accessibilityLabel屬性string
2
accessible
屬性bool
當為true時，表示該元素是可以進行訪問，
默認情況下所有可觸摸的元素控件都是可以訪問的
3
onAccessibilityTap方法function
該當accessible為true的時候并且用戶對控件View做了一個Tap(輕輕的觸摸或者點擊)的手勢
4
onLayout方法function
當組件的布局發生變動的時候，會自動調用下面的方法
:{nativeEvent: { layout: {x, y, width, height}}}。
該事件當重新計算布局的時候會立即進行觸發，不過界面可能不會立即刷新，
特別當布局動畫正在加載中的時候。
5
onMagicTap方法function
當accessible為true的時候，當用戶雙指點擊(Magic Tap)的時候，進行觸發
風格樣式
在React Native中的Style風格布局，其實和CSS樣式有很多相似的地方，這邊介紹一下:
Style標簽說明Style標簽說明
FlexBox彈性布局(詳細點擊了解)transforms
動畫屬性(詳細點擊了解)
backfaceVisibilityenum('visible', 'hidden')定義界面翻轉的
時候是否可見backgroundColor背景顏色
borderColor邊框顏色,這邊幾個就是代表上下左右變寬的顏色borderTopColor,borderRightColor,
borderBottomColor,borderLeftColorborderRadius邊框圓角大小，其他幾個是上下左右邊框的圓角.borderTopLeftRadius,borderTopRightRadius,
borderBottomLeftRadius,borderBottomRightRadius
borderStyle邊框線的風格,這個和CSS樣式一樣的
,enum('solid', 'dotted', 'dashed')borderWidth邊框寬度，另外四個是上下左右的邊框寬度:borderTopWidth，borderRightWidth，borderBottomWidth，borderLeftWidth
opacity設置透明度overflow設置內容超過容器顯示還是隱藏
elevation高度，設置Z軸，可以產生立體效果
下面是幾個特殊的屬性，這邊直接介紹所有平臺通用以及只在Android平臺有效果的屬性
①.testID? (全平臺)
可以根據該testID在測試的時候定位該View
②:accessibilityComponentType(android平臺)
定義是否該UI組件和原生組件一致化處理
③.accessibilityLiveRegion? enum('none','polite','assertive')? (android平臺)
該當View發生更新時候的，是否需要通過用戶，不過該只對Android4.4以及以上的平臺設備有效果
④.collapsable (android平臺)
布局合并優化使用
⑤.importantForAccessibility enum('auto', 'yes', 'no', 'no-hide-descendants') (android平臺)
設置視圖響應事件等級
⑥.needsOffscreenAlphaCompositing? (android平臺)
設置View是否需要渲染和半透明度效果處理的先后次序。
⑦.renderToHardwareTextureAndroid? (android)
設置是否需要GPU進行渲染
Text
屬性方法(主要一些可用的屬性)
①.allowFontScaling (bool):控制字體是否根據iOS的設置進行自動縮放-iOS平臺,Android平臺不適用
②.numberOfLines (number):進行設置Text顯示文本的行數，如果顯示的內容超過了行數，默認其他多余的信息就不會顯示了。
③.onLayout (function) 當布局位置發生變動的時候自動進行觸發該方法, 其中該function的參數如下:
[code lang="" start="" highlight=""]{nativeEvent: {layout: {x, y, width, height}}}[/code]
④.onPress (fcuntion) 該方法當文本發生點擊的時候調用該方法.
風格樣式
1..繼承可以使用View組件的所有Style(具體查看http://facebook.github.io/react-native/docs/view.html#style)
2.color:字體顏色
3..fontFamily 字體名稱
4..fontSize? 字體大小
5..fontStyle?? 字體風格(normal,italic)
6..fontWeight? 字體粗細權重("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
7..textShadowOffset 設置陰影效果{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?? 線的風格("solid", 'double', 'dotted', 'dashed')
15.textDecorationColor? 線的顏色?????? 16.writingDirection? 文本方向("auto", 'ltr', 'rtl')
Image
屬性方法
1.onLayout?? (function) 當Image布局發生改變的，會進行調用該方法，調用的代碼為:
{nativeEvent: {layout: {x, y, width, height}}}.
2.onLoad (function):當圖片加載成功之后，回調該方法
3.onLoadEnd (function):當圖片加載失敗回調該方法，該不會管圖片加載成功還是失敗
4.onLoadStart (fcuntion):當圖片開始加載的時候調用該方法
5.resizeMode? 縮放比例,可選參數('cover', 'contain', 'stretch') 該當圖片的尺寸超過布局的尺寸的時候，會根據設置Mode進行縮放或者裁剪圖片
6.source {uri:string} 進行標記圖片的引用，該參數可以為一個網絡url地址或者一個本地的路徑
樣式風格
1.FlexBox? 支持彈性盒子風格
2.Transforms? 支持屬性動畫??????????????? 3.resizeMode? 設置縮放模式
4.backgroundColor 背景顏色
5.borderColor???? 邊框顏色????????????? 6.borderWidth 邊框寬度
7.borderRadius? 邊框圓角
8.overflow 設置圖片尺寸超過容器可以設置顯示或者隱藏('visible','hidden')
9.tintColor? 顏色設置???????? 10.opacity 設置不透明度0.0(透明)-1.0(完全不透明)
TextInput
屬性方法(這邊講解平臺公用以及Android生效的屬性方法)
3.1.View 支持View的相關屬性
3.2.autoCapitalize? 控制TextInput輸入的字符進行切換成大寫(可選擇參數:'none', 'sentences', 'words', 'characters')
none:不自動切換任何字符成大寫
sentences:默認每個句子的首字母變成大寫
words:每個單詞的首字母變成大寫
characters:每個字母全部變成大寫
3.3.autoCorrect? bool? 設置拼寫自動修正功能 默認為開啟(true)
3.4.autoFocus bool? 設置是否默認獲取到焦點默認為關閉(false)。該需要componentDidMount方法被調用之后才會獲取焦點哦(componentDidMount是React組件被渲染之后React主動回調的方法)
3.5.defaultValue? string 給文本輸入設置一個默認初始值。
3.6.editable bool? 設置文本框是否可以編輯 默認值為true,可以進行編輯
3.7.keyboardType? 鍵盤類型(可選參數:"default", 'email-address', 'numeric', 'phone-pad', "ascii-capable", 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') 該用來選擇默認彈出鍵盤的類型例如我們甚至numeric就是彈出數字鍵盤。鑒于平臺的原因如下的值是所有平臺都可以進行通用的
default
numeric??????????? 數字鍵盤
email-address? 郵箱地址
3.8.maxLength? number? 可以限制文本輸入框最大的輸入字符長度
3.9.multiline bool? 設置可以輸入多行文字，默認為false(表示無論文本輸入多少，都是單行顯示)
3.10.onBlur? function 監聽方法，文本框失去焦點回調方法
3.11.onChange function 監聽方法,文本框內容發生改變回調方法
3.12.onChangeText? function監聽方法，文本框內容發生改變回調方法，該方法會進行傳遞文本內容
3.13.onEndEditing? function監聽方法，當文本結束文本輸入回調方法
3.14.onFocus? function 監聽方法? 文本框獲取到焦點回調方法
3.15.onLayout? function監聽方法? 組價布局發生變化的時候調用，調用方法參數為 {x,y,width,height}
3.16.onSubmitEditing function監聽方法，當編輯提交的時候回調方法。不過如果multiline={true}的時候，該屬性就不生效
3.17.placeholder string 當文本輸入框還沒有任何輸入的時候，默認顯示信息，當有輸入的時候該值會被清除
3.18.placeholderText Color? string 設置默認信息顏色(placeholder)
3.19.secureTextEntry? bool 設置是否為密碼安全輸入框 ，默認為false
3.20.style 風格屬性? 可以參考Text組件風格
3.21.value? string 輸入框中的內容值
以上是一些Android，iOS平臺通用的屬性，下面根據官網的文檔，我這邊組要講解一下適用于Android平臺的屬性方法
3.22.numberOfLines number設置文本輸入框行數，該需要首先設置multiline為true,設置TextInput為多行文本。
3.23.textAlign 設置文本橫向布局方式 可選參數('start', 'center', 'end')
3.24.textAlignVertical 設置文本垂直方向布局方式 可選參數('top', 'center', 'bottom')
3.25.underlineColorAndroid? 設置文本輸入框下劃線的顏色
ProgressBarAndroid
屬性方法
3.1.支持View控件的屬性方法 (這些屬性是從View控件中繼承下來)? 例如:大小,布局,邊距啊
3.2.color? 設置進度的顏色屬性值
3.3.indeterminate 設置是否要顯示一個默認的進度信息，該如果styleAttr的風格設置成Horizontal的時候該值必須設置成false
3.4.progress? number? 設置當前的加載進度值(該值在0-1之間)
3.5.styleAttr??? 進度條框的風格 ，可以取的值如下:
Horizontal
Small
Large
Inverse
SmallInverse
LargeInverse
Navigator
Navigator.SceneConfigs.PushFromRight (默認)
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相關屬性樣式全部繼承(例如:寬和高,背景顏色,邊距等相關屬性樣式)
3.2.contentContainerStyle? 樣式風格屬性(傳入StyleSheet創建的Style文件)。該樣式會作用于被ScrollView包裹的所有的子視圖。
3.3.horizontal?? 表示ScrollView是橫向滑動還是縱向滑動。該默認為false表示縱向滑動
3.4.keyboardDismissMode?? 枚舉類型表示鍵盤隱藏類型，可選值('none', "interactive", 'on-drag')? 三個值的意義分別如下:
none? 默認值，表示在進行拖拽滑動的時候不隱藏鍵盤
on-drag?? 表示在進行拖拽滑動開始的時候隱藏鍵盤
interactive? 表示當拖拽觸摸移動的同時隱藏鍵盤，向上拖拽的時候取消隱藏。不過在Android平臺上面該選項不支持，所以會和'none'一樣的效果。
3.5.keyboardShouldPersistTaps? 該屬性默認為false，表示如果當前是textinput控件，并且鍵盤是彈出狀態的話，點擊textinput之外地方，會進行隱藏鍵盤。反之不會有效果，鍵盤還是成打開狀態。
3.6.onContentSizeChange? function? 該當滾動視圖的內容尺寸大小發生變化的時候進行調用
3.7.onScroll? function? 該方法在滾動的時候每frame(幀)調用一次。該方法事件調用的頻率可以使用scrollEventThrottle屬性進行設置。
3.8.refreshControl?? element 設置元素控件，該可以進行指定RefreshControl組件。這樣可以為ScrollView添加下拉刷新的功能.
3.9.removeClippedSubviews? 測試屬性 當該值為true的時候。在ScrollView視圖之外的視圖(該視圖的overflow屬性值必須要為hidden)會從被暫時移除，該設置可以提高滾動的性能。
3.10.showsHorizontalScrollIndicator?? 該值設置是否需要顯示橫向滾動指示條
3.11.showsVerticalScrollIndicator 該值設置是否需要顯示縱向滾動指示條
3.12.sendMomentumEvents?? 當ScrollView有onMomentumScrollBegin或者onMomentumScrollEnd方法設置，該sendMomentumEvents值設置為true的時候。變化的事件信息會通過該Android框架自動發送出來，然后之前設置的方法進行捕捉。
ToolbarAndroid
屬性方法
3.1.View相關屬性樣式全部繼承(例如:寬和高,背景顏色,邊距等相關屬性樣式)
3.2.actions 設置功能列表信息屬性 傳入的參數信息為: [{title: string, icon: optionalImageSource, show: enum('always', 'ifRoom', 'never'), showWithText: bool}] ??進行設置功能菜單中的可用的相關功能。該會在顯示在組件的右側(顯示方式為圖標或者文字)，如果界面上面區域已經放不下了，該會加入到隱藏的菜單中(彈出進行顯示)。該屬性的值是一組對象數組，每一個對象包括以下以下一些參數:
title: 必須的，該功能的標題
icon: 功能的圖標? 采用該代碼進行獲取 require('./some_icon.png')
show: 該設置圖標直接顯示，還是隱藏或者顯示在彈出菜單中。always代表總是顯示,ifRoom代表如果Bar中控件夠進行顯示，或者never代表使用直接不顯示
showWithText? boolean 進行設置圖標旁邊是否要顯示標題信息
3.3.contentInSetEnd? number 該用于設置ToolBar的右邊和屏幕的右邊緣的間距。
3.4.contentInsetStart number 該用于設置ToolBar的左邊和屏幕的左邊緣的間距。
3.5.logo? optionalImageSource? 可選圖片資源? 用于設置Toolbar的Logo圖標
3.6.navIcon optionalImageSource 可選圖片資源 用于設置導航圖標
3.7.onActionSelected function方法 當我們的功能被選中的時候回調方法。該方法只會傳入唯一一個參數:點擊功能在功能列表中的索引信息
3.8.onIconClicked function 當圖標被選中的時候回調方法
3.9.overflowIcon? optionalImageSource 可選圖片資源 設置功能列表中彈出菜單中的圖標
3.10. rtl?? 設置toolbar中的功能順序是從右到左(RTL:Right To Left)。為了讓該效果生效，你必須在Android應用中的AndroidMainifest.xml中的application節點中添加android:supportsRtl="true"，然后在你的主Activity(例如:MainActivity)的onCreate方法中調用如下代碼:setLayoutDirection(LayoutDirection.RTL)。
3.11.subtitle? string 設置toolbar的副標題
3.12.subtitleColor? color? 設置設置toolbar的副標題顏色
3.13.title string? 設置toolbar標題
3.14.titleColor color 設置toolbar的標題顏色
Switch
屬性方法
View相關屬性樣式全部繼承(例如:寬和高,背景顏色,邊距等相關屬性樣式)
disabled bool 如果該值為true,用戶就無法點擊switch開關控件，默認為false
onValueChange function 方法，當該組件的狀態值發生變化的時候回調方法
value bool 該開關的值，如果該值為true的時候，開關呈打開狀態，默認為false
Picker
屬性方法
View相關屬性樣式全部繼承(例如:寬和高,背景顏色,邊距等相關屬性樣式)
onValueChange? function方法,當選擇器item被選擇的時候進行調用。該方法被調用的時候回傳入一下兩個參數
itemValue:該屬性值為被選中的item的屬性值
itemPosition:該選擇器被選中的item的索引position
selectedValue: any任何參數值，選擇器選中的item所對應的值，該可以是一個字符串或者一個數字
style pickerStyleType 該傳入style樣式，設置picker的樣式風格
enabled bool 如果該值為false，picker就無法被點擊選中。例如:用戶無法進行做出選擇
mode enum ('dialog','dropdown')? 選擇器模式。在Android平臺上面，設置mode可以控制用戶點擊picker彈出的樣式風格
'dialog': 該值為默認值，進行彈出一個模態dialog(彈出框)
'dropdown':以picker視圖為基礎，在該視圖下面彈出下拉框
prompt string? 設置picker的提示語(標題),在Android平臺上面，模式設置成'dialog',顯示彈出框的標題
ViewPagerAndroid
View相關屬性樣式全部繼承(例如:寬和高,背景顏色,邊距等相關屬性樣式)
initialPage? number? ViewPagerAndroid初始索引頁，不過我們可以使用setPage方法來更新頁碼，通過onPageSelected方法來監聽頁面滑動。
keyboardDismissMode? enum('none','on-drag')? 枚舉類型，進行設置在拖拽滑動的過程中是否要顯示鍵盤。
'none'? 默認值,在拖拽中不隱藏鍵盤
'on-drag'?? 當拖拽滑動開始的時候隱藏鍵盤
onPageScroll? function 方法，該方法在頁面進行滑動的時候執行(不管是因為頁面滑動動畫原因還是由于頁面之間的拖拽以及滑動原因).該會回調傳入的event.nativeEvent對象會有攜帶如下參數:
'position'?? 從左起開始第一個可見的頁面的索引
'offset'? 該value值的范圍為[0,1)，該用來代表當前頁面的卻換的狀態。值x代表該索引頁面(1-x)的范圍可見，另外x范圍代表下一個頁面可見的區域
onPageScrollStateChanged? function 該回調方法會在頁面滾動狀態發生變化的時候進行調用。頁面的滾動狀態有下面三種情況:
'idle' 該表示當前用戶和頁面滾動沒有任何交互
'dragging'? 拖動中，該表示當前頁面正在被拖拽滑動中
'settling'?? 該表示存在頁面拖拽或者滑動的交互。頁面滾動正在結束。并且正在關閉或者打開動畫。
onPageSelected? function 方法 該在頁面進行拖拽滑動切換完成之后回調。該方法回調參數中的event.nativeEvent對象會攜帶如下一個屬性 : 'position'? 該屬性代表當前選中的頁面的索引.
TouchableHighlight
TouchableNativeFeedback
TouchableOpacity
TouchableWithoutFeedback
屬性方法
accessibilityComponentType?? View.AccessibilityComponentType? 設置可訪問的組件類型
accessibilityTraits View.AccessibilityTraits,[View.AccessibilityTraits] 設置訪問特征
accessible? bool? 設置當前組件是否可以訪問
delayLongPress? number? 設置延遲的時間，單位為毫秒。從onPressIn方法開始，到onLongPress被調用這一段時間
delayPressIn? number 設置延遲的時間，單位為毫秒，從用戶觸摸控件開始到onPressIn被調用這一段時間
delayPressOut? number 設置延遲的時間，單位為毫秒，從用戶觸摸事件釋放開始到onPressOut被調用這一段時間
onLayout? function? 當組件加載或者改組件的布局發生變化的時候調用。調用傳入的參數為{nativeEvent:{layout:{x,y,width,height}}}
onLongPress function 方法，當用戶長時間按壓組件(長按效果)的時候調用該方法
onPress function 方法 當用戶點擊的時候調用(觸摸結束)。 但是如果事件被取消了就不會調用。(例如:當前被滑動事件所替代)
onPressIn? function? 用戶開始觸摸組件回調方法
onPressOut function 用戶完成觸摸組件之后回調方法
pressRetentionOffset {top:number,left:number,bottom:number,right:number}?? 該設置當視圖滾動禁用的情況下，可以定義當手指距離組件的距離。當大于該距離該組件會失去響應。當少于該距離的時候，該組件會重新進行響應。
ListView
屬性方法
ScrollView相關屬性樣式全部繼承
dataSource?? ListViewDataSource? 設置ListView的數據源
initialListSize? number? 進行設置ListView組件剛剛加載的時候渲染的列表行數，用這個屬性確定首屏或者首頁加載的數量，而不是花大量的時間渲染加載很多頁面數據，提高性能
onChangeVisibleRows? function? (visibleRows,changedRows)=>void。當可見的行發生變化的時候回調該方法。visibleRows參數對所有可見的行為{selectionID:{rowId:true}}的形式，changedRow參數對已經改變可見的行為{selectionID:{rowID:true|false}}。該值true代表可見，false代表在視圖之外不可見的行。
onEndReachedThreshold? number 當偏移量達到設置的臨界值調用onEndReached
onEndReached function 方法，當所有的數據項行被渲染之后，并且列表往下進行滾動。一直滾動到距離底部onEndReachedThredshold設置的值進行回調該方法。原生的滾動事件進行傳遞(通過參數的形式)。
pageSize?? number 每一次事件的循環渲染的行數
removeClippedSubviews? bool? 該屬性用于提供大數據列表的滾動性能。該使用的時候需要給每一行(row)的布局添加over:'hidden'樣式。該屬性默認是開啟狀態。
renderFooter function 方法? ()=>renderable ，在每次渲染過程中頭和尾總會重新進行渲染。如果發現該重新繪制的性能開銷比較大的時候，可以使用StaticContainer容器或者其他合適的組件。在每一次渲染過程中Footer(尾)該會一直在列表的底部，header(頭)該會一直在列表的頭部
renderHeader? function 方法 使用情況和上面的renderFooter差不多
renderRow function 方法?? (rowData,sectionID,rowID,highlightRow)=>renderable?? 該方法有四個參數，其中分別為數據源中一條數據，分組的ID，行的ID，以及標記是否是高亮選中的狀態信息。
renderScrollComponent function 方法 (props)=>renderable? 該方法可以返回一個可以滾動的組件。默認該會返回一個ScrollView
renderSectionHeader function (sectionData,sectionID)=>renderable?? 如果設置了該方法，這樣會為每一個section渲染一個粘性的header視圖。該視圖粘性的效果是當剛剛被渲染開始的時候，該會處于對應的內容的頂部，然后開始滑動的時候，該會跑到屏幕的頂端。直到滑動到下一個section的header(頭)視圖，然后被替代為止。
renderSeparator function? (sectionID,rowID,adjacentRowHighlighted)=>renderable 如果設置該方法，會在被每一行的下面渲染一個組件作為分隔。除了每一個section分組的頭部視圖前面的最后一行。
scrollRenderAheadDistance number? 進行設置當該行進入屏幕多少像素以內之后就開始渲染該行
Cilpboard
使用范例：
async _setClipboardContent(){
Clipboard.setString('Hello World');try{varcontent =await Clipboard.getString();
ToastAndroid.show('粘貼板的內容為:'+content,ToastAndroid.SHORT);
}catch(e) {
ToastAndroid.show(e.message,ToastAndroid.SHORT);
}
}
DatePickerAndroid
1.Promise open(options:Object)?? staitc,靜態方法，使用該方法進行加載彈出一個標準的Android時間日期選擇器。該options(可選)參數有以下三種對象：
①:'date'?? 日期Date對象或者時間戳以毫秒單位-日期已默認格式顯示
②:'minDate'? 日期Date對象或者時間戳以毫秒單位-可以選擇的最小時間
③:'maxDate' 日期Date對象或者時間戳以毫秒單位-可以選擇的最大時間
options ={date:this.state.maxDate,maxDate:newDate()}
2.dateSetAction() ,static靜態方法，選擇時間日期選擇器
3.dismissedAction(),static靜態方法，關閉時間日期選擇器
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
