問題：react-native-swiper的寬度和高度怎么設(shè)置庸追？

本文我們將用設(shè)置高度來舉例說明（寬度的設(shè)置可以類比得到）

目標：給Swiper設(shè)置300的高度

初嘗試使用react-native-swiper的同學都知道，react-native-swiper的高度很魔性蜒车。先貼一張官方給的設(shè)置截圖：

官方的高度設(shè)置描述

嘗試去理解If no specify default fullscreen mode by flex:1的意思悔详。

表面上看撞反，就是如果不設(shè)置似扔，就會按照通過flex:1設(shè)置高度逛尚。所以很自然就想到垄惧，給Swiper指定一個高度即可，于是我做了以下嘗試：

render() {
return (
  <View style={{flex:1, backgroundColor: 'gray'}}>
    <Swiper 
      style={{backgroundColor: 'yellow'}}
      height={300}>
      <View style={{backgroundColor: 'green', height: 150}}><Text>1</Text></View>
      <View style={{backgroundColor: 'green', height: 150}}><Text>2</Text></View>
      <View style={{backgroundColor: 'green', height: 150}}><Text>3</Text></View>
      <View style={{backgroundColor: 'green', height: 150}}><Text>4</Text></View>
    </Swiper>
  </View>
)
}

然后你會發(fā)現(xiàn)绰寞，結(jié)果并沒有你認為的那樣到逊，看下面的截圖。

第一次嘗試

然后再仔細品味這句description滤钱，可能你會想到觉壶，設(shè)置flex:0就好了
，于是把上面的設(shè)置修改一下菩暗，給Swiper的style設(shè)置flex:1掰曾，信心滿滿地保存運行查看效果。

設(shè)置flex:0

通過看顏色可以知道停团，Swiper的灰色背景確實只有300高旷坦，但是Swiper的點卻在最下方，說明Swiper仍然占據(jù)了整個屏幕的寬度佑稠。

當然秒梅，你也可以嘗試在Swiper的style中設(shè)置高度，這里就不貼代碼了舌胶，我直接給出我測試的結(jié)論捆蜀。Swiper設(shè)置的屬性height，會直接覆蓋style中的height幔嫂，也就是說辆它，如果只設(shè)置style中的height，則style中height生效履恩，如果同時設(shè)置style中的height和Swiper的屬性height锰茉，則Swiper的屬性height生效，style中的height無論設(shè)置什么值都沒有效果切心。
不管是style中的height還是Swiper的屬性height都只是限制了Swiper的背景色高度飒筑，而不是Swiper占據(jù)的整個空間的高度。

通過上面的實驗绽昏，仔細分析你就會發(fā)現(xiàn)协屡，無論怎樣設(shè)置，Swiper的高度始終等于屏幕的高度全谤，而它的本質(zhì)是等于Swiper父組件的高度（當然肤晓，這里的結(jié)論是基于Swiper的父組件只有Swiper一個子組件，如果有其他組件，那就會根據(jù)flex:1來分享父組件剩余的空間）材原。

到這里沸久，已經(jīng)快要接近真相了，假設(shè)我們給Swiper包裹一層View作為父組件（后面簡稱父組件）余蟹，然后設(shè)置父組件的高度卷胯，那么理論上Swiper就會自適應(yīng)父組件，使得Swiper的高度等于父組件的高度威酒。
于是寫下代碼窑睁，做最后的試驗

render() {
return (
  <View style={{flex:1, backgroundColor: 'gray'}}>
    <View style={{height: 300}}>
    <Swiper>
      <View style={{backgroundColor: 'green', height: 150}}><Text>1</Text></View>
      <View style={{backgroundColor: 'green', height: 150}}><Text>2</Text></View>
      <View style={{backgroundColor: 'green', height: 150}}><Text>3</Text></View>
      <View style={{backgroundColor: 'green', height: 150}}><Text>4</Text></View>
    </Swiper>
    </View>
  </View>
)
}

終于成功了！

所以最終方案為：在Swiper外面包裹一層View葵孤，通過設(shè)置View的高度担钮，間接設(shè)置Swiper的高度。如下所示：

<View style={{height: 300}}>
  <Swiper>
  //...item省略
  </Swiper>
</View>