首页 文章

使用React Native中的ScrollViews滚动水平和垂直

提问于
浏览 次
1

我尝试实现水平AND垂直滚动，如下所示：ScrollPreviewMock . 水平滚动将特色内容显示为图像（应该是可点击的） . 垂直滚动具有其他可点击的项目 .

我的第一次尝试是使用两个位置绝对的ScrollViews，但水平ScrollView会消耗所有触摸事件（即使在添加了pointerEvents = {“box-none”}之后） .

这就是我在那种情况下尝试的：

import React, { Component } from "react";
import { Dimensions, ScrollView, Text, StyleSheet, View } from "react-native";
const DimensionsWindowWidth = Dimensions.get("window").width;

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <ScrollView horizontal={true} style={styles.scrollView}>
          <View style={styles.slide}>
            <Text>H1</Text>
          </View>
          <View style={styles.slide}>
            <Text>H2</Text>
          </View>
          <View style={styles.slide}>
            <Text>H3</Text>
          </View>
        </ScrollView>
        <ScrollView pointerEvents={"box-none"} style={styles.scrollView}>
          <View style={styles.item}>
            <Text>V1</Text>
          </View>
          <View style={styles.item}>
            <Text>V2</Text>
          </View>
          <View style={styles.item}>
            <Text>V3</Text>
          </View>
          <View style={styles.item}>
            <Text>V4</Text>
          </View>
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  slide: {
    padding: 100,
    width: DimensionsWindowWidth,
    height: "100%"
  },
  scrollView: {
    position: "absolute",
    width: "100%",
    height: "100%"
  },
  item: {
    margin: 40,
    height: 100
  }
});

（也作为零食：https://snack.expo.io/Hyb7x-qQQ）

我的第二次尝试是使用PanResponder并在onPanResponderMove方法中使用ScrollViews scrollTo方法 . 但是，似乎我必须实现所有ScrollView特殊功能，如平滑滚动和自行弹回 .

任何想法如何解决这个问题，同时具有水平背景和垂直滚动项目可点击？

react-native

2 回答

  • 0

    在IOS中你可以简单地使用嵌套的ScrollView来表示这种行为，但在Android中你需要其他东西 .

    看看react-native-nested-scroll-view，声称只为Android做这件事 . 我没有使用它，但似乎它使用原生的NestedScrollView类 .

    回复于
  • 0

    这是我如何在我的应用程序中为我的网格表实现垂直和水平滚动 . 它适用于IOS和ANDROID . 我希望它对你有所帮助 .

    import {Dimensions, AsyncStorage,View,Image, TextInput,ScrollView,FlatList, Platform} from 'react-native';

const {width, height} = Dimensions.get("window"),
    vw = width / 100
vh = height / 100


styles={
    parentScrollViewStyle: {
        height: height-300,
        borderWidth: 1,
        borderColor: '#D3D3D3'
    },
    childScrollViewStyle: {
        borderWidth: 1,
        borderColor: '#D3D3D3'
    },
    gridStyle: {
        width: '100%',
        marginTop: 20
    }
}




<Grid style={styles.gridStyle} >

    <ScrollView style={styles.parentScrollViewStyle}>
        <ScrollView horizontal={true}  contentContainerStyle={styles.childScrollViewStyle}>

         //here your child views to render.

        </ScrollView>
    </ScrollView>
</Grid>
    回复于

相关问题