react本机ViewPagerAndroid peek特性

Question

如何在peekEnabled上正确使用“ViewPagerAndroid”属性？

<ViewPagerAndroid peekEnabled={true} >{this.props.children}</ViewPagerAndroid>

，我想要像这样的东西

​

​

Answer 1

看来peekEnabled按预期工作需要ViewPagerAndroid拥有padding。

查看RN源代码，子视图样式被设置为position: absolute和right,left,top,bottom: 0，因此父容器填充没有任何影响。

作为解决办法，您可以将pageMargin设置为负值，并在子视图中使用paddingLeft,paddindRight来达到同样的效果。

例如：

<ViewPagerAndroid pageMargin={-70} style={{ flex: 1 }}>
  <View style={{ padding: 35 }}>
    <View style={{ backgroundColor: 'pink', flex: 1 }} />
  </View>
  <View style={{ padding: 35 }}>
    <View style={{ backgroundColor: 'cyan', flex: 1 }} />
  </View>
  <View style={{ padding: 35 }}>
    <View style={{ backgroundColor: 'magenta', flex: 1 }} />
  </View>
</ViewPagerAndroid>

演示