我們初始化一個項目，打開index.ios.js,可以看到一下內容
009F9480-34C7-44EB-9BB6-E3762B570DB5.png
大致分為4大模塊
- 1、組件導入區
- 2、核心代碼區
- 3、組件樣式區
- 4、注冊啟動組件
React-Native的基本控件屬性方法
View
| 名稱 |
類型 |
說明 |
| accessibilityLabel |
string類型，屬性 |
|
| accessible |
bool類型，屬性 |
當為true時，表示該元素是可以進行訪問，默認情況下所有可觸摸的元素控件都是可以訪問的 |
| onAccessibilityTap |
方法 |
該當accessible為true的時候並且用戶對控件View做了一個Tap(輕輕的觸摸或者點擊)的手勢 |
| onLayout |
方法 |
當組件的布局發生變動的時候，會自動調用下面的方法 :{nativeEvent: { layout: {x, y, width, height}}}。該事件當重新計算布局的時候會立即進行觸發，不過界面可能不會立即刷新，特別當布局動畫正在加載中的時候。 |
| onMagicTap |
方法 |
當accessible為true的時候，當用戶雙指點擊(Magic Tap)的時候，進行觸發 |
Text
| 名稱 |
類型 |
說明 |
| allowFontScaling |
bool |
控制字體是否根據iOS的設置進行自動縮放-iOS平台,Android平台不適用 |
| numberOfLines |
number |
進行設置Text顯示文本的行數，如果顯示的內容超過了行數，默認其他多余的信息就不會顯示了 |
| onLayout |
function |
當布局位置發生變動的時候自動進行觸發該方法, |
| onPress |
function |
該方法當文本發生點擊的時候調用該方法. |
| color |
屬性 |
字體顏色 |
| fontFamily |
屬性 |
字體名稱 |
| fontSize |
屬性 |
字體大小 |
| fontStyle |
屬性 |
字體風格(normal,italic) |
| fontWeight |
屬性 |
字體粗細權重("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900') |
| textShadowOffset |
屬性 |
設置陰影效果{width: number, height: number} |
| textShadowRadius |
屬性 |
陰影效果圓角 |
| textShadowColor |
屬性 |
陰影效果的顏色 |
| letterSpacing |
屬性 |
字符間距 |
| lineHeight |
屬性 |
行高 |
| textAlign |
屬性 |
文本對其方式("auto", 'left', 'right', 'center', 'justify') |
| textDecorationLine |
屬性 |
橫線位置 ("none", 'underline', 'line-through', 'underline line-through') |
| textDecorationStyle |
屬性 |
線的風格("solid", 'double', 'dotted', 'dashed') |
| textDecorationColor |
屬性 |
線的顏色 |
| writingDirection |
屬性 |
文本方向("auto", 'ltr', 'rtl') |
Image
| 名稱 |
類型 |
說明 |
| onLayout |
function |
當Image布局發生改變的，會進行調用該方法，調用的代碼為:{nativeEvent: {layout: {x, y, width, height}}} |
| onLoad |
function |
當圖片加載成功之后，回調該方法 |
| onLoadEnd |
function |
圖片加載結束的時候，回調的方法 |
| onLoadStart |
fcuntion |
當圖片開始加載的時候調用該方法 |
| resizeMode |
|
縮放比例,可選參數('cover', 'contain', 'stretch') 該當圖片的尺寸超過布局的尺寸的時候，會根據設置Mode進行縮放或者裁剪圖片 |
| source |
|
{uri:string} 進行標記圖片的引用，該參數可以為一個網絡url地址或者一個本地的路徑 |
| FlexBox |
|
支持彈性盒子風格 |
| Transforms |
|
支持屬性動畫 |
| resizeMode |
|
設置縮放模式 |
| backgroundColor |
|
背景顏色 |
| borderColor |
|
邊框顏色 |
| borderWidth |
|
邊框寬度 |
| borderRadius |
|
邊框圓角 |
| overflow |
|
設置圖片尺寸超過容器可以設置顯示或者隱藏('visible','hidden') |
| tintColor |
|
顏色設置 |
| opacity |
|
設置不透明度0.0(透明)-1.0(完全不透明) |
TextInput
| 名稱 |
說明 |
| autoCapitalize |
控制TextInput輸入的字符進行切換成大寫(可選擇參數:'none', 'sentences', 'words', 'characters');none:不自動切換任何字符成大寫;sentences:默認每個句子的首字母變成大寫;words:每個單詞的首字母變成大寫;characters:每個字母全部變成大寫 |
| autoCorrect |
設置拼寫自動修正功能 默認為開啟(true) |
| autoFocus |
設置是否默認獲取到焦點默認為關閉(false)。該需要componentDidMount方法被調用之后才會獲取焦點哦(componentDidMount是React組件被渲染之后React主動回調的方法) |
| defaultValue |
string 給文本輸入設置一個默認初始值 |
| editable |
bool 設置文本框是否可以編輯 默認值為true,可以進行編輯 |
| keyboardType |
鍵盤類型(可選參數:"default", 'email-address', 'numeric', 'phone-pad', "ascii-capable", 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') 該用來選擇默認彈出鍵盤的類型例如我們甚至numeric就是彈出數字鍵盤 |
| maxLength |
number 可以限制文本輸入框最大的輸入字符長度 |
| multiline |
bool 設置可以輸入多行文字，默認為false(表示無論文本輸入多少，都是單行顯示) |
| onBlur |
function 監聽方法，文本框失去焦點回調方法 |
| onChange |
function 監聽方法,文本框內容發生改變回調方法 |
| onChangeText |
function監聽方法，文本框內容發生改變回調方法，該方法會進行傳遞文本內容 |
| onEndEditing |
function監聽方法，當文本結束文本輸入回調方法 |
| onFocus |
function 監聽方法 文本框獲取到焦點回調方法 |
| onLayout |
function監聽方法 組價布局發生變化的時候調用，調用方法參數為 {x,y,width,height} |
| onSubmitEditing |
function監聽方法，當編輯提交的時候回調方法。不過如果multiline={true}的時候，該屬性就不生效 |
| placeholder |
string 當文本輸入框還沒有任何輸入的時候，默認顯示信息，當有輸入的時候該值會被清除 |
| placeholderText |
Color string 設置默認信息顏色(placeholder) |
| secureTextEntry |
bool 設置是否為密碼安全輸入框 ，默認為false |
| style |
風格屬性 可以參考Text組件風格 |
| underlineColorAndroid |
設置文本輸入框下划線的顏色 |
ScrollView
| 名稱 |
說明 |
| contentContainerStyle |
樣式風格屬性(傳入StyleSheet創建的Style文件)。該樣式會作用於被ScrollView包裹的所有的子視圖 |
| horizontal |
表示ScrollView是橫向滑動還是縱向滑動。該默認為false表示縱向滑動 |
| keyboardDismissMode |
枚舉類型表示鍵盤隱藏類型，可選值('none', "interactive", 'on-drag') 三個值的意義分別如下:none 默認值，表示在進行拖拽滑動的時候不隱藏鍵盤;on-drag 表示在進行拖拽滑動開始的時候隱藏鍵盤; interactive 表示當拖拽觸摸移動的同時隱藏鍵盤，向上拖拽的時候取消隱藏。不過在Android平台上面該選項不支持，所以會和'none'一樣的效果 |
| onContentSizeChange |
function 該當滾動視圖的內容尺寸大小發生變化的時候進行調用 |
| onScroll |
function 該方法在滾動的時候每frame(幀)調用一次。該方法事件調用的頻率可以使用scrollEventThrottle屬性進行設置。 |
| refreshControl |
element 設置元素控件，該可以進行指定RefreshControl組件。這樣可以為ScrollView添加下拉刷新的功能 |
| showsHorizontalScrollIndicator |
該值設置是否需要顯示橫向滾動指示條 |
| showsVerticalScrollIndicator |
該值設置是否需要顯示縱向滾動指示條 |
Switch
| 名稱 |
說明 |
| disabled |
bool 如果該值為true,用戶就無法點擊switch開關控件，默認為false |
| onValueChange |
function 方法，當該組件的狀態值發生變化的時候回調方法 |
| value |
bool 該開關的值，如果該值為true的時候，開關呈打開狀態，默認為false |
Picker
| 名稱 |
說明 |
| onValueChange |
function方法,當選擇器item被選擇的時候進行調用。該方法被調用的時候回傳入一下兩個參數。itemValue:該屬性值為被選中的item的屬性值；itemPosition:該選擇器被選中的item的索引position |
| selectedValue |
any任何參數值，選擇器選中的item所對應的值，該可以是一個字符串或者一個數字 |
| style |
pickerStyleType 該傳入style樣式，設置picker的樣式風格 |
| mode |
enum ('dialog','dropdown') 選擇器模式。在Android平台上面，設置mode可以控制用戶點擊picker彈出的樣式風格。'dialog': 該值為默認值，進行彈出一個模態dialog(彈出框)；dropdown':以picker視圖為基礎，在該視圖下面彈出下拉框 |
| prompt |
string 設置picker的提示語(標題),在Android平台上面，模式設置成'dialog',顯示彈出框的標題 |
