React-Native學習系列(二) Image和ScrollView

接下來，我們接著(一)繼續講，今天我們學習的是Image元件和ScrollView元件。

Image元件

Image:一個用於顯示多種不同型別圖片的React元件。那麼要如何使用呢？
引入本地圖片:

<Image source={require('../images/myHeader.png')}/>

引入網路圖片

<Image style={styles.imageStyle} source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}/>

這裡要說的是載入網路圖片的話，必須指定圖片大小,例如logo_og.png，否則會遇到無法顯示的問題，而引入本地圖片的話,如果不指定圖片的大小，那麼預設的是圖片的原大小，例如myHeader這張圖片，大小為250 * 250，預設顯示的是250 * 250.
安卓和iOS的圖片尺寸不一樣，那麼給圖片命名為my-icon.android.png/my-icon.ios.png,系統會自動判斷系統來載入圖片.
那麼現在我們們來說一下Image的屬性

    width:320,
    height:100,

    //cover:保持圖片寬高放大顯示圖片，保證把Image填滿，顯示放大圖片的中心
    //contain: 在保持圖片寬高比的前提下縮放圖片，完整顯示圖片，未填充的區域保留
    //stretch：拉伸圖片,不維持寬高比，填滿Image設定的大小。
    //repeat:類似於平鋪效果
    resizeMode: 'cover',
    backgroundColor:'gray',
    // tintColor: 'red',為所有非透明的畫素指定一個顏色
    // borderBottomLeftRadius ReactPropTypes.number
    // borderBottomRightRadius ReactPropTypes.number
    // borderColor color
    // borderRadius number
    // borderTopLeftRadius ReactPropTypes.number
    // borderTopRightRadius ReactPropTypes.number
    borderWidth: 2,//設定邊框粗細程度
    borderColor: 'black',//設定邊框顏色
    borderRadius: 30,//設定圓角大小，上面幾個屬性表示不同位置的圓角
    opacity: 0.5,//設定透明程度，1為完全不透明
    overflow: 'visible',//‘visible’,'hidden'當圖片原始尺寸大於Image尺寸時，多餘的部分是否可見

ScrollView元件

ScrollView必須有一個確定的高度才能正常使用，它實際上所做的就是將一系列不確定高度的子元件裝進一個確定高度的容器,而這個容器就是ScrollView。
contentContainerStyle StyleSheetPropType(ViewStylePropTypes)
這些樣式會應用到一個內層的內容容器上，所有的子檢視都會包裹在內容容器內。

<ScrollView contentContainerStyle={styles.contentContainer}>
</ScrollView>

現在我們們來看一下它的常用屬性和方法

<ScrollView style={styles.scrollV}  
                    contentContainerStyle={styles.contentContainer}
                    horizontal={true}
                    keyboardDismissMode='none'
                    keyboardShouldPersistTaps={false}
                    onScroll={this._scroller}
                    >
          <Text>就是這樣就是這樣就是這樣就是這樣就是這樣就是這樣就是這樣就是這樣就是這樣就是這樣就是這樣就是這樣就是這樣就是這樣</Text>
</ScrollView>

上面的這個是橫向滾動的
horizontal:布林值型別，當此屬性為true的時候，所有的的子檢視會在水平方向上排成一行，預設為false.
keyboardDismissMode:使用者拖拽滾動檢視的時候，是否要隱藏軟鍵盤，預設為不隱藏'none', "interactive", 'on-drag'
keyboardShouldPersistTaps:當此屬性為false的時候，在軟鍵盤啟用之後，點選焦點文字輸入框以外的地方，鍵盤就會隱藏。
如果為true，滾動檢視不會響應點選.
onContentSizeChange function 該當滾動檢視的內容尺寸大小發生變化的時候進行呼叫。
onScroll function 該方法在滾動的時候每frame(幀)呼叫一次。該方法事件呼叫的頻率可以使用scrollEventThrottle屬性進行設定。

    _scroller(){
    console.log("橫向滾動");
  }

refreshControl element 設定元素控制元件，該可以進行指定RefreshControl元件。這樣可以為ScrollView新增下拉重新整理的功能.這個我們們以後講。
showsHorizontalScrollIndicator:bool值是否顯示一個水平方向的滾動條
showsVerticalScrollIndicator :bool值是否顯示一個豎直方向的滾動條
以上是一些基礎的屬性，進階的我們們後面再講。
下面是一些常用屬性

scroller: {
    flex:1,
    margin:20,
    width: 300,
    backgroundColor :'white',
    borderWidth:2,
    borderColor:'black',
  },
  contentContainer: {
    shadowColor: 'red',//設定陰影顏色
    shadowOffset: {width:10,height:5},//設定陰影面積
    shadowOpacity: 1,//設定陰影的透明度
    shadowRadius: 20,//設定陰影的圓角
  },

下週我們們接著說另外的控制元件。

歡迎關注我的github
另外，本系列所有的原始碼都放在了我的github上：https://github.com/Demon404/Honey