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"}]
}

然后将-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

是一个很好的解决方案

您可以很轻松地在各种屏幕上浏览，只需查看文档中提供的代码示例即可。

React Native：水平和垂直分页

1 个答案: