react-native-swiper的宽度和高度如何设置

问题：react-native-swiper的宽度和高度怎么设置？

本文我们将用设置高度来举例说明（宽度的设置可以类比得到）

目标：给Swiper设置300的高度

初尝试使用react-native-swiper的同学都知道，react-native-swiper的高度很魔性。先贴一张官方给的设置截图：

官方的高度设置描述

尝试去理解If no specify default fullscreen mode by flex:1的意思。

表面上看，就是如果不设置，就会按照通过flex:1设置高度。所以很自然就想到，给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>
)
}

然后你会发现，结果并没有你认为的那样，看下面的截图。

第一次尝试

然后再仔细品味这句description，可能你会想到，设置flex:0就好了
，于是把上面的设置修改一下，给Swiper的style设置flex:1，信心满满地保存运行查看效果。

设置flex:0

通过看颜色可以知道，Swiper的灰色背景确实只有300高，但是Swiper的点却在最下方，说明Swiper仍然占据了整个屏幕的宽度。

当然，你也可以尝试在Swiper的style中设置高度，这里就不贴代码了，我直接给出我测试的结论。Swiper设置的属性height，会直接覆盖style中的height，也就是说，如果只设置style中的height，则style中height生效，如果同时设置style中的height和Swiper的属性height，则Swiper的属性height生效，style中的height无论设置什么值都没有效果。
不管是style中的height还是Swiper的属性height都只是限制了Swiper的背景色高度，而不是Swiper占据的整个空间的高度。

通过上面的实验，仔细分析你就会发现，无论怎样设置，Swiper的高度始终等于屏幕的高度，而它的本质是等于Swiper父组件的高度（当然，这里的结论是基于Swiper的父组件只有Swiper一个子组件，如果有其他组件，那就会根据flex:1来分享父组件剩余的空间）。

到这里，已经快要接近真相了，假设我们给Swiper包裹一层View作为父组件（后面简称父组件），然后设置父组件的高度，那么理论上Swiper就会自适应父组件，使得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，通过设置View的高度，间接设置Swiper的高度。如下所示：

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