首先是把react-native-swiper 引入到项目中,先cd到项目跟目录下,再
$ npm i react-native-swiper --save
完成后在项目中要使用的地方import 进来
import Swiper from 'react-native-swiper';
在return()中使用就OK,如:
return ( <Swiper style={styles.wrapper} showsButtons={true} //显示左右点击的按钮 loop = {true} autoplay = {true} height={200} //没有效果 > <View style={styles.slide1}> <Image style={{ 300, height: 190}} resizeMethod='stretch' source={{uri: 'https://www.baidu.com/img/bd_logo1.png'}} /> <Text style={styles.text}>滑动试图第一页</Text> </View> <View style={styles.slide1}> <Text style={styles.text}>滑动试图第二页</Text> </View> <View style={styles.slide1}> <Text style={styles.text}>滑动试图第三页</Text> </View> </Swiper> )
但是这里就遇到个坑,swiper打开一直是个全屏的,在属性里怎么修改也无效。
后来我把react-native-swiper封装成一个组件,在引用时在外层的View定义height,发现是有效果的。
学习中,仅当自己学习笔记。不准确的地方不定期更新!!!