Explication détaillée des étapes d'utilisation du swiper du plug-in du package React-Native

Cette fois, je vous apporte une explication détaillée des étapes d'utilisation du plug-in d'emballage réactif-natif. Quelles sont les précautions lors de l'utilisation du plug-in d'emballage réactif-natif. Les voici. cas concrets, jetons un coup d'oeil.

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: &#39;#fff&#39; }}
    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 :

Que faire si l'environnement de développement local n'est pas accessible par IP

vue traite les données obtenues par storejs

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!