Question

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

我的第一个尝试是使用两个都具有绝对位置的ScrollView，但是水平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特殊功能，例如平滑滚动并自行反弹。

有什么想法可以同时使水平背景和垂直滚动项都可点击同时解决吗？

Answer 1

在IOS中，您可以简单地使用嵌套ScrollView来实现这种行为，但是在Android中，您还需要其他功能。

看看react-native-nested-scroll-view，它声称仅适用于Android。我没有使用过它，但似乎它使用了原生NestedScrollView类。

Answer 2

这是我在网格表中的应用中实现垂直和水平滚动的方式。对于我在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>

Answer 3

在这里我可以垂直和水平滚动。我在android上尝过了。

    import React, { Component } from "react";
    import { List, ListItem, Text } from "native-base";
    import { View, ScrollView } from "react-native";

    class Table extends Component {
    render() {
        return (
        <View>
            <ScrollView>
            <ScrollView horizontal={true}>
                <List>
                <ListItem>
                    <Text>COMEDY </Text>
                    <Text>Hangover </Text>
                    <Text>COMEDY </Text>
                    <Text>Hangover </Text>
                    <Text>COMEDY </Text>
                    <Text>Hangover </Text>
                </ListItem>
                <ListItem>
                    <Text>COMEDY </Text>
                    <Text>Hangover </Text>
                    <Text>COMEDY </Text>
                    <Text>Hangover </Text>
                    <Text>COMEDY </Text>
                    <Text>Hangover </Text>
                </ListItem>
                <ListItem>
                    <Text>COMEDY </Text>
                    <Text>Hangover </Text>
                    <Text>COMEDY </Text>
                    <Text>Hangover </Text>
                    <Text>COMEDY </Text>
                    <Text>Hangover </Text>
                </ListItem>
                <ListItem>
                    <Text>COMEDY </Text>
                    <Text>Hangover </Text>
                    <Text>COMEDY </Text>
                    <Text>Hangover </Text>
                    <Text>COMEDY </Text>
                    <Text>Hangover </Text>
                </ListItem>
                <ListItem>
                    <Text>COMEDY </Text>
                    <Text>Hangover </Text>
                    <Text>COMEDY </Text>
                    <Text>Hangover </Text>
                    <Text>COMEDY </Text>
                    <Text>Hangover </Text>
                </ListItem>
                <ListItem>
                    <Text>COMEDY </Text>
                    <Text>Hangover </Text>
                    <Text>COMEDY </Text>
                    <Text>Hangover </Text>
                    <Text>COMEDY </Text>
                    <Text>Hangover </Text>
                </ListItem>
                <ListItem>
                    <Text>COMEDY :</Text>
                    <Text>Hangover </Text>
                </ListItem>
                <ListItem>
                    <Text>COMEDY :</Text>
                    <Text>Hangover </Text>
                </ListItem>
                <ListItem>
                    <Text>COMEDY :</Text>
                    <Text>Hangover </Text>
                </ListItem>
                <ListItem>
                    <Text>COMEDY :</Text>
                    <Text>Hangover </Text>
                </ListItem>
                <ListItem>
                    <Text>COMEDY :</Text>
                    <Text>Hangover </Text>
                </ListItem>
                <ListItem>
                    <Text>COMEDY :</Text>
                    <Text>Hangover </Text>
                </ListItem>
                <ListItem>
                    <Text>COMEDY :</Text>
                    <Text>Hangover </Text>
                </ListItem>
                <ListItem>
                    <Text>COMEDY :</Text>
                    <Text>Hangover </Text>
                </ListItem>
                <ListItem>
                    <Text>COMEDY :</Text>
                    <Text>Hangover </Text>
                </ListItem>
                <ListItem>
                    <Text>COMEDY :</Text>
                    <Text>Hangover </Text>
                </ListItem>
                <ListItem>
                    <Text>COMEDY :</Text>
                    <Text>Hangover </Text>
                </ListItem>
                </List>
            </ScrollView>
            </ScrollView>
        </View>
        );
    }
    }

    export default Table;

在React Native中使用ScrollViews进行水平和垂直滚动

3 个答案: