探索无限可能:React Native 强大组件 - react-native-swiper
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Swiper from 'react-native-swiper';
export default class Slider extends React.Component {
render() {
return (
<Swiper style={styles.wrapper} showsButtons>
<View style={styles.slide1}>
<Text style={styles.text}>Hello World! Slide 1</Text>
</View>
<View style={styles.slide2}>
<Text style={styles.text}>Hello World! Slide 2</Text>
</View>
<View style={styles.slide3}>
<Text style={styles.text}>Hello World! Slide 3</Text>
</View>
</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',
}
});
这个代码实例展示了如何在React Native应用中使用react-native-swiper
库来创建一个简单的滑块视图。代码中定义了三个滑块,每个滑块都有不同的背景颜色和文本信息。showsButtons
属性用于显示控制按钮,允许用户通过按钮进行滑动。
评论已关闭