react native scrollview horizontal swipe left or right on tap

问题

I am showing pictures gallery in full screen mode. I am using scrollview in horizontal for scrolling the pictures. Right now I can scroll the pictures by swiping left or right and I using the pagingEnabled enabled props.

But I want to add more gesture, where when user tap on left or right ( a distance from the edge) , it will automatically mapping the swapping gesture. How can I do this?

回答1:

Get a ref to the <ScrollView> then to scrollToEnd() or use scrollTo methods - https://facebook.github.io/react-native/docs/scrollview.html#scrollto

To calculate page number, you would use onLayout to calculate sizes of your pages. If it's the width of the device then that's easy, just use Dimensions.get('window').width then feed that to the x in scrollTo.

回答2:

I assume your scroll view looks like this with pagingEnabled and horizontal props.

<ScrollView
   horizontal={true}
   pagingEnabled={true}
   onMomentumScrollEnd={event => {
      this.setState({xOffset: event.nativeEvent.contentOffset.x })
   }}>
      // Content 
</ScrollView>

The position can be calculated with :

this.state.xOffset/ DeviceSize.width

onMomentumScrollEnd is called each time you scroll an item in the ScrollView

(the content must be full width in this case)

来源：https://stackoverflow.com/questions/48429464/react-native-scrollview-horizontal-swipe-left-or-right-on-tap