android - react native : Horizontal and Vertical Paging Together

Question

目前正在尝试实现 https://github.com/leecade/react-native-swiper用我的程序。按照他的例子，我尝试通过将元素旋转 90 度并将子项旋转 90 度来进行垂直分页。

虽然它有效，但它有很多错误，我只能在屏幕边缘左右滑动。理想情况下，我希望能够在屏幕上向任何方向滑动。以及防止我的上下页面水平滑动。

水平分量

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ScrollView
} from 'react-native';
import {Parallax2} from "./Parallax2";

import Swiper from 'react-native-swiper';

const styles = StyleSheet.create({
    wrapper: {
    },
    slide1: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#9DD6EB',
    },
    slide2: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#97CAE5',
    },
    slide3: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#92BBD9',
    },
    text: {
        color: '#fff',
        fontSize: 30,
        fontWeight: 'bold',
    },
})

export class Parallax extends Component {
    render() {
        return (
            <View
                style={{flex: 1}}>
                <Swiper
                    style={styles.wrapper}
                    showsButtons={false}
                    loop={false}
                    showsPagination={false}
                    index={1}>
                    <View
                        style={styles.slide1}>
                        <Text style={styles.text}>Left</Text>
                    </View>
                    <Parallax2/>
                    <View
                        style={styles.slide3}>
                        <Text
                            style={styles.text}>Right</Text>
                    </View>
                </Swiper>
            </View>
        );
    }
}

垂直组件，几乎相同的文件，只是在我添加的样式中:transform: [{rotate: "90deg"}] 到 wrapper，transform: [{rotate: "-90deg"}] 到相应的幻灯片。

例如:

wrapper: {
    transform: [{rotate: "90deg"}]
}

-90 将添加到幻灯片 1、2 和 3

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ScrollView
} from 'react-native';

import Swiper from 'react-native-swiper';

export class Parallax2 extends Component {
    render() {
        return (
            <View
                style={{flex: 1}}>
                <Swiper
                    style={styles.wrapper}
                    showsButtons={false}
                    loop={false}
                    showsPagination={false}
                    index={1}>
                    <View
                        style={styles.slide1}>
                        <Text
                            style={styles.text}>Up</Text>
                    </View>
                    <View
                        style={styles.slide2}>
                        <Text
                            style={styles.text}>Index</Text>
                    </View>
                    <View
                        style={styles.slide3}>
                        <Text
                            style={styles.text}>Down</Text>
                    </View>
                </Swiper>
            </View>
        );
    }
}

Answer 1

我看到这个问题没有回复。我真的推荐通过在屏幕上滑动方向来完成事情的绕行方法。一个很好的包是 https://www.npmjs.com/package/react-native-swipe-gestures

您可以很容易地以您想要的方式浏览不同的屏幕，只需查看文档中提供的代码示例即可。