Comment appliquer Swiper dans les projets

Cette fois, je vais vous montrer comment appliquer swiper dans le projet, et quelles sont les précautions à prendre pour appliquer swiper dans le projet. Ce qui suit est un cas pratique, jetons un coup d'œil.

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 dossier de composants dans src et créez un fichier swiper.js en dessous, ainsi que 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: &#39;#fff&#39; }}
    autoplay={this.props.autoplay} //是否自动轮播
    autoplayTimeout={this.props.autoplayTimeout} //轮播秒数
   >
    {this.props.data.map((item, idx) => this._renderSwiperItem(item, idx))} //如果数据是个对象里面的数组加一个循环
   </RNSwiper>
  );
 }
}

C'est 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 l'entreprise. 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 gérer le passage dynamique des paramètres de requête dans vue-router

Comment faire fonctionner nodejs pour chiffrer les mots de passe

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!