React Native：水平和垂直分页的结合

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"}] 到包装器中，以及 transform: [{rotate: "-90deg"}] 到对应的幻灯片中。

例如：

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

在幻灯片1、2和3中将添加-90。

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>
        );
    }
}

- Jimmy

Answer 1

我看到这个问题还没有得到回应。我真的建议通过在屏幕上滑动方向来完成任务。一个很好的工具包是https://www.npmjs.com/package/react-native-swipe-gestures

你可以非常容易地按照自己的方式浏览不同的屏幕，只需查看文档中提供的代码示例即可。

- Jorge Cirilo

---

如果链接在未来失效，将代码示例放在答案正文中会使答案更好。 - chevybow