LoginSignup
0
0

More than 5 years have passed since last update.

ScrollViewのpagingEnabledプロパティのOS間挙動の違いについて

Posted at

ReactNative: 0.44.0

前提

ScrollViewのpagingEnabledのドキュメントには'This can be used for horizontal pagination.'と記載があるので、vertical方向のページネーションは対応していない模様。

When true, the scroll view stops on multiples of the scroll view's size when scrolling. This can be used for horizontal pagination. The default value is false.
https://facebook.github.io/react-native/docs/scrollview.html#pagingenabled

pagingEnable={true}とし、かつhorizontal={true}しない場合の挙動を確認した。

結果

iOS: 縦方向でもページングの挙動となった
android: 縦方向はページングの挙動とならなかった。
ios.gif
android.gif

コード

import React from 'react'
import {
  Text,
  View,
  Dimensions,
  ScrollView,
} from 'react-native'
const { width, height } = Dimensions.get('window')

var styles = {
  slide: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'gray',
    width: width,
    height: height,
  },
  text: {
    color: '#fff',
    fontSize: 30,
    fontWeight: 'bold'
  }
}

export default () => (
  <ScrollView style={styles.wrapper} pagingEnabled={true}>
    <View style={styles.slide}>
      <Text style={styles.text}>Hello</Text>
    </View>
    <View style={styles.slide}>
      <Text style={styles.text}>World</Text>
    </View>
    <View style={styles.slide}>
      <Text style={styles.text}>!!</Text>
    </View>
  </ScrollView>
);
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0