Question

我在垂直ScrollView中有一个ViewPager（以前为ViewPagerAndroid），其中包含其他内容。我发现在尝试滑动到ViewPager的下一页时，有时有时会垂直滚动。看来这些误刷的角度与水平线的距离不够近。通过实验，我发现此阈值小于45度。可以通过任何方式对此进行调整，以使任何小于45度的滑动角度都会移动ViewPager而不是ScrollView吗？

以下代码演示了该问题。每页上的线是45度。沿着它滑动会垂直滚动。必须以更大的水平角度滑动才能使ViewPager滑动。

我也尝试了不使用ScrollView的情况，并且ViewPager以相同的方式响应（或不响应）。

/**
 * ViewPager within ScrollView demo
 *
 * @flow
 */

import React, {Component} from 'react';
import {Platform, ScrollView, StyleSheet, Text, View} from 'react-native';
import ViewPager from "@react-native-community/viewpager";

const styles = StyleSheet.create({
  viewPager: {
      height: 200,
  },
  page: {
      height: 200,
      borderColor: 'green',
      borderWidth: 1,
  },
  angledLine: {
    position: 'absolute',
    bottom: 0,
    height: 1,
    width: '100%',
    backgroundColor: 'blue',
    transform: ([
      { rotateZ: '-45deg' },
      { perspective: 1000 },
    ]),
  },
});

const Page = ({ index }) => (
    <View style={styles.page}>
      <View style={styles.angledLine} />
      <Text>{`page ${index}`}</Text>
    </View>
);

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <ScrollView>
        <ViewPager style={styles.viewPager} initialPage={10}>
          { range(20).map(i => <Page key={i} index={i}/>) }
        </ViewPager>
        { range(50).map(i => <Text key={i}>{`line ${i}`}</Text>) }
      </ScrollView>
    );
  }
}

function range(n) {
  const array = [];
  for (let i = 0; i < n; i++) {
    array.push(i);
  }
  return array;
}

是否可以使用ViewPager / ViewPagerAndroid调整滑动角度阈值？

0 个答案: