react-native封裝插件swiper的使用方法
首先創(chuàng)建簡(jiǎn)單的react-native項(xiàng)目,創(chuàng)建一個(gè)文件夾。然后用命令符輸入
react-native init swiper
創(chuàng)建完成之后開(kāi)發(fā)項(xiàng)目,我用的vs
打開(kāi)控制臺(tái),安裝swiper依賴。
安裝:npm i react-native-swiper --save
查看:npm view react-native-swiper
刪除:npm rm react-native-swiper --save
這里還需要 npm i 下更新下本地的依賴庫(kù)
啟動(dòng)app項(xiàng)目
ios: react-native run-ios
android: react-native run-android
開(kāi)始上碼,在src里面創(chuàng)建個(gè)components文件夾下邊創(chuàng)建個(gè)swiper.js文件,以及index.js,加上說(shuō)明文檔
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: { //圓點(diǎn)樣式 }, activeDotStyle: { //圓點(diǎn)樣式 }, dotStyle: { //圓點(diǎn)樣式 } }); const activeDot = ( <View style={styles.activeDotWrapperStyle}> <View style={styles.activeDotStyle} /> </View> ); const dot = <View style={styles.dotStyle} />; 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 ( <TouchableWithoutFeedback key={index} onPress={() => this.handleItemPress(item)}> <View style={[{ flex: 1 }]}>{this.props.renderItem(item)}</View> </TouchableWithoutFeedback> ); } render() { return this.props.data.length === 0 || !this.state.showSwiper ? null : ( <RNSwiper height={this.props.height} //圖片高度 activeDot={activeDot} dot={dot} style={{ backgroundColor: '#fff' }} autoplay={this.props.autoplay} //是否自動(dòng)輪播 autoplayTimeout={this.props.autoplayTimeout} //輪播秒數(shù) > {this.props.data.map((item, idx) => this._renderSwiperItem(item, idx))} //如果數(shù)據(jù)是個(gè)對(duì)象里面的數(shù)組加一個(gè)循環(huán) </RNSwiper> ); } }
這是index.js文件
import { Carousel } from './carousel/Carousel'; export { Carousel };
公共組件庫(kù)
這里用于放置與業(yè)務(wù)無(wú)關(guān)的公共組件。組件實(shí)現(xiàn)必須考慮靈活性,擴(kuò)展性,不能包含具體的業(yè)務(wù)邏輯。
組件必須以 你做的業(yè)務(wù)命名 為前綴,如 TryCarousel.js 。每個(gè)組件必須單獨(dú)放在目錄中,目錄必須全小寫(中橫線分割),如 carousel/TryCarousel.js 。
一個(gè)基本的組件結(jié)構(gòu):
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(輪播組件)
主要用于通用的圖片輪播,能夠提供點(diǎn)擊事件響應(yīng)。
Usage:
Props:
屬性 | 描述 | 類型 | 默認(rèn)值 |
---|---|---|---|
data | Carousel數(shù)據(jù)源 | Array | - |
height | Carousel的高度 | number | 150 |
onPressItem | 點(diǎn)擊Carousel Item的時(shí)候觸發(fā) | fn | - |
renderItem | 具體的渲染Item的方法,請(qǐng)參考FlatList | fn | - |
autoplay | 是否自動(dòng)切換 | bool | true |
autoplayTimeout | Item自動(dòng)切換的時(shí)間間隔(單位s) | number | 2.5 |
需要導(dǎo)入的地方
import { HigoCarousel } from '../../components'; <Carousel data={} //接受的數(shù)據(jù) onPressItem={} //點(diǎn)擊事件 height={} //圖片高度 autoplay={} //是否自動(dòng)播放 autoplayTimeout={} //過(guò)渡時(shí)間 renderItem={item => { return <Image source={{ uri: item.imageSource }} style={{ flex: 1 }} />; }} //圖片 />
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
react進(jìn)階教程之異常處理機(jī)制error?Boundaries
在react中一旦出錯(cuò),如果每個(gè)組件去處理出錯(cuò)情況則比較麻煩,下面這篇文章主要給大家介紹了關(guān)于react進(jìn)階教程之異常處理機(jī)制error?Boundaries的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08react-beautiful-dnd拖拽排序功能的實(shí)現(xiàn)過(guò)程
這篇文章主要介紹了react-beautiful-dnd拖拽排序功能的實(shí)現(xiàn)過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07React項(xiàng)目如何使用Element的方法步驟
本文主要介紹了React項(xiàng)目如何使用Element的方法步驟,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-11-11在?React?Native?中使用?CSS?Modules的配置方法
有些前端工程師希望也能像開(kāi)發(fā) web 應(yīng)用那樣,使用 CSS Modules 來(lái)開(kāi)發(fā) React Native,本文將介紹如何在 React Native 中使用 CSS Modules,需要的朋友可以參考下2022-08-08React+ts實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了React+ts實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09React Native中WebView與html雙向通信遇到的坑
這篇文章主要介紹了React Native中WebView與html雙向通信的一些問(wèn)題,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-01-01