Comment utiliser le swiper du plug-in du package React-Native

Cet article présente principalement comment utiliser le swiper du plug-in d'emballage React-Native. Maintenant, je le partage avec vous et le donne comme référence.

Créez d’abord un simple projet natif de réaction et créez un dossier. Utilisez ensuite le caractère de commande pour saisir

react-native init swiper

Une fois la création terminée, je développe le projet que j'utilise vs

Ouvrez la console et installez les dépendances 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

Démarrez le codage, créez un fichier swiper.js sous le dossier des composants dans src et index.js, ainsi que 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>
  );
 }
}

Voici le fichier index.js

import { Carousel } from './carousel/Carousel';

export { Carousel };

Bibliothèque de composants publics

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)

est principalement utilisé pour le carrousel d'images général et peut fournir une réponse à un événement 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 }} />;
      }} //图片
/>

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Analyse du chargement asynchrone Ajax

Composition technologique Ajax et analyse des principes de base

À propos du flux de sortie à la fin du servlet en technologie Ajax

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!