目前正在尝试使用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>
);
}
}