React native Android ScrollView pagingenabled 不起作用答案

【问题标题】：React native Android ScrollView pagingenabled not workingReact native Android ScrollView pagingenabled 不起作用
【发布时间】：2017-11-22 02:00:04
【问题描述】：

我正在尝试在 React Native 中使用水平 ScrollView，并且我设置了 pagingEnabled={true}。它适用于 iOS，但不适用于 android

<ScrollView style={{marginTop: 10}}
            horizontal={true}
            pagingEnabled={true}
            ref={(scrollView) => { _scrollView = scrollView; }}
            onScroll={this._handleScroll}
            scrollEventThrottle={16}>
  <View style={styles.starView}>
    <Text>1</Text>
  </View>
  <View style={styles.videoView}>
    <Text>2</Text>
  </View>
  <View style={styles.techView}>
    <Text>3</Text>
  </View>
</ScrollView>

【问题讨论】：

使用什么版本的 React Native？

标签： react-native

【解决方案1】：

使用适用于 Android 的 ViewPager

render() {
  if (Platform.OS === 'ios') {
    //Scroll View 
    return this.renderIOS();
  } else {
    return this.renderAndroid();
  }
}


renderIOS(){
 <ScrollView style={{marginTop: 10}}
        horizontal={true}
        pagingEnabled={true}
        ref={(scrollView) => { _scrollView = scrollView; }}
        onScroll={this._handleScroll}
        scrollEventThrottle={16}>
         /*your content go here*/
        </ScrollView>
}


renderAndroid() {
return (
  <ViewPagerAndroid
    ref="scrollview"
    initialPage={this.state.initialSelectedIndex}
    onPageSelected={this.handleHorizontalScroll}
    style={styles.container}>
    /* your pages go here */
  </ViewPagerAndroid>
 );
}

【讨论】：

【解决方案2】：

对于遇到此问题的任何人，无论他们的 React Native 版本如何，Android 都不支持 pagingEnabled 和 horizontal={false}。

https://github.com/facebook/react-native/issues/7780

【讨论】：

【解决方案3】：

android 的 pagingEnabled 属性从 0.28 开始支持，in 0.27 it is not supported。你应该检查你的 react 原生版本并升级。

【讨论】：

我只是想知道，垂直分页也适用于我的android。我正在使用 RN 版本 0.57，谷歌像素。不过，文档说android不支持垂直分页？我应该高兴还是担心？你有什么想法吗？

【解决方案4】：

在 Android 上，我遇到了孩子没有采用 100% 宽度的问题，所以我最终使用 Dimensions 并为每个孩子设置宽度：

render() {
    const { navigation:{ state:{params:{ type, petId }} } } = this.props;
    const { isSubmitting, submitError } = this.state;

    const stylePageWidth = { width:Dimensions.get('window').width };

    return (
        <View style={styles.main}>
            <ScrollView horizontal pagingEnabled>
                <View style={stylePageWidth}>

                </View>
                <View style={stylePageWidth}>

                </View>
            </ScrollView>
        </View>
     )

【讨论】：