Maison > Article > interface Web > Explication détaillée de l'utilisation du package plug-in swiper
Cette fois je vais vous apporter une explication détaillée de l'utilisation du plug-in swiper d'encapsulation. Quelles sont les précautions lors de l'utilisation du plug-in swiper d'encapsulation Voici des cas pratiques, prenons un. regarder.
Créez d’abord un simple projet natif de réaction et créez un dossier. Utilisez ensuite la ligne de commande pour saisir
react-native init swiper
Après avoir créé le projet, j'utilise vs
pour ouvrir la console et installer la dépendance swiper.
Installer : npm i réagis-native-swiper --save
Afficher : npm view réagir-native-swiper
Supprimer : npm rm réagir-native-swiper --save
Aussi ici Besoin de mettre à jour la bibliothèque de dépendances locale sous npm i
Démarrer le projet d'application
ios : react-native run-ios
android : react-native run- android
Commencez à coder, créez un fichier swiper.js sous le dossier des composants dans src, et index.js, plus la documentation
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 = ( <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} //是否自动轮播 autoplayTimeout={this.props.autoplayTimeout} //轮播秒数 > {this.props.data.map((item, idx) => this._renderSwiperItem(item, idx))} //如果数据是个对象里面的数组加一个循环 </RNSwiper> ); } }
Ceci est le fichier index.js
import { Carousel } from './carousel/Carousel'; export { Carousel };
Bibliothèque de composants publics
Ceci est utilisé pour placer des composants publics qui n'ont rien à voir avec le business. La mise en œuvre des composants doit prendre en compte la flexibilité et l'évolutivité, et ne peut pas contenir de logique métier spécifique.
Le composant doit être préfixé par le nom de l'entreprise que vous exercez, par exemple TryCarousel.js. Chaque composant doit être placé dans un répertoire distinct et le répertoire doit être entièrement en minuscules (séparés par des tirets), tel que carousel/TryCarousel.js.
Une structure de composants de base :
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() {} }
Liste des composants
carrousel (composant carrousel)
Principalement utilisé pour le carrousel d'images général et peut fournir une réponse aux événements de clic.
Utilisation :
Accessoires :
属性 | 描述 | 类型 | 默认值 |
---|---|---|---|
data | Carousel数据源 | Array | - |
height | Carousel的高度 | number | 150 |
onPressItem | 点击Carousel Item的时候触发 | fn | - |
renderItem | 具体的渲染Item的方法,请参考FlatList | fn | - |
autoplay | 是否自动切换 | bool | true |
autoplayTimeout | Item自动切换的时间间隔(单位s) | number | 2.5 |
Où importer
import { HigoCarousel } from '../../components'; <Carousel data={} //接受的数据 onPressItem={} //点击事件 height={} //图片高度 autoplay={} //是否自动播放 autoplayTimeout={} //过渡时间 renderItem={item => { return <Image source={{ uri: item.imageSource }} style={{ flex: 1 }} />; }} //图片 />
Je crois que vous maîtrisez la méthode après avoir lu le cas dans ce article, et plus Comme c'est excitant, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture recommandée :
Comment implémenter le passage de paramètres dynamiques de requête dans vue-router
Pourquoi ne pouvez-vous pas utiliser IP pour accéder à Webpack localement ?
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!