1. 程式人生 > >React-Native的基本控制元件屬性方法

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

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 {
      var content = await Clipboard.getString();
      ToastAndroid.show('貼上板的內容為:'+content,ToastAndroid.SHORT);
    } catch (e) {
      ToastAndroid.show(e.message,ToastAndroid.SHORT);
    }
  }

複製程式碼

DatePickerAndroid

1.Promise<Object> open(options:Object)   staitc,靜態方法,使用該方法進行載入彈出一個標準的Android時間日期選擇器。該options(可選)引數有以下三種物件:

①:'date'   日期Date物件或者時間戳以毫秒單位-日期已預設格式顯示

②:'minDate'  日期Date物件或者時間戳以毫秒單位-可以選擇的最小時間

③:'maxDate' 日期Date物件或者時間戳以毫秒單位-可以選擇的最大時間

options = {date: this.state.maxDate,maxDate:new Date()}

2.dateSetAction() ,static靜態方法,選擇時間日期選擇器

3.dismissedAction(),static靜態方法,關閉時間日期選擇器

複製程式碼

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

複製程式碼