在React Native中使用ScrollView水平和垂直滚动

rekjcdws 于 2023-02-19 发布在 React

关注(0)|答案(4)|浏览(346)

我尝试实现一个水平和垂直滚动如下：
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
    }
});

(Also作为零食：https://snack.expo.io/Hyb7x-qQQ）
我的第二次尝试是使用PanResponder，并在onPanResponderMove方法中使用ScrollViews的scrollTo方法。但后来似乎我必须自己实现所有ScrollView的特殊功能，如平滑滚动和反弹。
有什么想法，我可以解决这个问题，同时有两个，背景在水平和项目在垂直滚动点击？

react-native

来源：https://stackoverflow.com/questions/51360856/scroll-horizontal-and-vertical-with-scrollviews-in-react-native

4条答案

按热度按时间

uyhoqukh1#

在IOS中，您可以简单地使用嵌套的ScrollView的这样的行为，但在Android中，您将需要其他东西。
看一看react-native-nested-scroll-view，它声称只为Android做这件事，我没有用过它，但它似乎使用了原生的NestedScrollView类。

赞(0）回复(0）举报 2023-02-19

64jmpszr2#

下面是我如何在我的应用程序中为我的网格表实现垂直和水平滚动。它在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>

赞(0）回复(0）举报 2023-02-19

w9apscun3#

在这里我可以垂直和水平滚动。我测试了它的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;

赞(0）回复(0）举报 2023-02-19

fdbelqdn4#

下面是一组基于其他答案的简化代码，您只需要嵌套scrollviews，并将内部的设置为horizontal。

<ScrollView>
<ScrollView horizontal={true}>
  //content
</ScrollView>
</ScrollView>

赞(0）回复(0）举报 2023-02-19

我来回答

在React Native中使用ScrollView水平和垂直滚动

4条答案

相关问题

热门标签

最新问答