简体   繁体   English

反应原生如何使滚动视图只能用两根手指或长按?

[英]React native How to make scrollview only work with two fingers or long press?

I have a scroll view react native element I am working with and I would like to limit the scroll to only work either using two fingers or when the user long presses then scrolls.我有一个滚动视图反应我正在使用的本机元素,我想将滚动限制为仅使用两根手指或当用户长按然后滚动时才起作用。

is this possible?这可能吗? if so How?如果是这样怎么办? Here is my current code.这是我当前的代码。 Longpressgesture handler is rocgnizing any of the touch events. Longpressgesture 处理程序正在处理任何触摸事件。

export default function SiteCard({route, navigation}) {
  const { site } = route.params;
  const [urls, setUrls] = useState({
    url2: site,
  })
  const webViewRef = useRef();

  const onLongPress = (event) => {
    if (event.nativeEvent.state === State.ACTIVE) {
      alert("I've been pressed for 800 milliseconds");
    }
  };

  return (
    <LongPressGestureHandler
    onHandlerStateChange={onLongPress}
    minDurationMs={200}
  >
    <ScrollView scrollEnabled={false}
    style={styles.tab}
    level='1'>
    <View>
      <WebView
          source={{ uri: urls.url2 }}
          style={styles.PageView}
          ref={webViewRef}
        />
    </View>
    </ScrollView>
  </LongPressGestureHandler>
  );
};


const styles = StyleSheet.create({
  PageView: {
    height: 800,
  }
});

There's a boolean prop called scrollEnabled that can be set to false to prevent the user from scrolling.有一个名为 scrollEnabled 的 boolean 道具可以设置为false以防止用户滚动。

See: reactnative.dev/docs/scrollview.html#scrollenabled请参阅: reactnative.dev/docs/scrollview.html#scrollenabled

You would just have to detect wether there's a long press or two fingers on the screen to switch the boolean to true .您只需检测屏幕上是否有长按或两根手指即可将 boolean 切换为true

I didn't dive into it but it seems to be a good place to start: react-native-gesture-handler我没有深入研究它,但它似乎是一个很好的起点: react-native-gesture-handler

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM