android - react-native ViewPagerAndroid peek 属性

Question

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

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

我想要这样的东西

Answer 1

似乎 peekEnabled 要按预期工作需要 ViewPagerAndroid 有 padding。
看着 RN source code ， subview 样式设置为 position: absolute 和 right,left,top,bottom: 0 因此父容器的填充无效。

作为解决方法，您可以将 pageMargin 设置为负值并在 subview 中使用 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>

demo