这篇文章主要介绍了react-native封装插件swiper的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
首先创建简单的react-native项目,创建一个文件夹。然后用命令符输入
react-native init swiper
创建完成之后开发项目，我用的vs
打开控制台，安装swiper依赖。
安装：npm i react-native-swiper --save
查看：npm view react-native-swiper
删除：npm rm react-native-swiper --save
这里还需要 npm i 下更新下本地的依赖库
启动app项目
ios: react-native run-ios
android: react-native run-android
开始上码，在src里面创建个components文件夹下边创建个swiper.js文件，以及index.js,加上说明文档
import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { StyleSheet, TouchableWithoutFeedback, View } from 'react-native'; import RNSwiper from 'react-native-swiper'; const styles = StyleSheet.create({ activeDotWrapperStyle: { //圆点样式 }, activeDotStyle: { //圆点样式 }, dotStyle: { //圆点样式 } }); const activeDot = ( ; export class Carousel extends Component { // Define component prop list static propTypes = { data: PropTypes.array, height: PropTypes.number, onPressItem: PropTypes.func, renderItem: PropTypes.func.isRequired, autoplay: PropTypes.bool, autoplayTimeout: PropTypes.number }; // Define props default value static defaultProps = { data: [], height: 150, autoplay: true, autoplayTimeout: 2.5, onPressItem: () => {}, renderItem: () => {} }; // Define inner state state = { showSwiper: false }; constructor(props) { super(props); this.handleItemPress = this.handleItemPress.bind(this); } componentDidMount() { setTimeout(() => { this.setState({ showSwiper: true }); }); } handleItemPress(item) { this.props.onPressItem(item); } _renderSwiperItem(item, index) { return ( this.handleItemPress(item)}> {this.props.renderItem(item)} ); } render() { return this.props.data.length === 0 || !this.state.showSwiper ? null : ( {this.props.data.map((item, idx) => this._renderSwiperItem(item, idx))} //如果数据是个对象里面的数组加一个循环 ); } } 这是index.js文件
import { Carousel } from './carousel/Carousel'; export { Carousel }; 公共组件库
这里用于放置与业务无关的公共组件。组件实现必须考虑灵活性，扩展性，不能包含具体的业务逻辑。
组件必须以 你做的业务命名 为前缀，如 TryCarousel.js 。每个组件必须单独放在目录中，目录必须全小写（中横线分割），如 carousel/TryCarousel.js 。
一个基本的组件结构：
import PropTypes from 'prop-types'; import React, { Component } from 'react'; export class TryCarousel extends Component { // Define component prop list static propTypes = {}; // Define props default value static defaultProps = {}; // Define inner state state = {}; constructor(props) { super(props); } // LifeCycle Hooks // Prototype Functions // Ensure the latest function is render render() {} } 组件列表
carousel（轮播组件）
主要用于通用的图片轮播，能够提供点击事件响应。
Usage:
Props:
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| data | Carousel数据源 | Array | - |
| height | Carousel的高度 | number | 150 |
| onPressItem | 点击Carousel Item的时候触发 | fn | - |
| renderItem | 具体的渲染Item的方法，请参考FlatList | fn | - |
| autoplay | 是否自动切换 | bool | true |
| autoplayTimeout | Item自动切换的时间间隔（单位s） | number | 2.5 |
需要导入的地方
import { HigoCarousel } from '../../components'; { return 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持html中文网。
以上就是react-native封装插件swiper的使用方法的详细内容，更多请关注0133技术站其它相关文章！
