Detailed explanation of the steps to use the react-native package plug-in swiper

This time I will bring you a detailed explanation of the steps for using the react-native packaging plug-in swiper. What are the precautions when using the react-native packaging plug-in swiper? Here are actual cases, let’s take a look.

First create a simple react-native project and create a folder. Then use the command line to enter

react-native init swiper

. After creating the development project, I use vs

to open the console and install the swiper dependency.

Installation: npm i react-native-swiper --save
View: npm view react-native-swiper
Delete: npm rm react-native-swiper --save
Here also Need to update the local dependency library under npm i

Start the app project

ios: react-native run-ios
android: react-native run-android

Start coding, create a components folder in src, create a swiper.js file, and index.js, and add the 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>
  );
 }
}

This is the index.js file

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

Public component library

This is used to place public components that have nothing to do with business. Component implementation must consider flexibility and scalability, and cannot contain specific business logic.

The component must be prefixed by the name of the business you do, such as TryCarousel.js. Each component must be placed in a separate directory, and the directory must be all lowercase (separated by dashes), such as carousel/TryCarousel.js.

A basic component structure:

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() {}
}

Component list

carousel (carousel component)

Mainly used for general image carousel, able to provide click event response.

Usage:

Props:

##dataCarousel data sourceArray-heightHeight of Carouselnumber150onPressItemTriggered when Carousel Item is clickedfn-renderItemFor specific methods of rendering Item, please refer to FlatList fn-autoplayWhether to switch automaticallybooltrue autoplayTimeoutItem automatic switching time interval (unit s) number2.5

Properties	Description	Type	Default value

Where to import

import { HigoCarousel } from '../../components';
<Carousel
      data={} //接受的数据
      onPressItem={} //点击事件
      height={} //图片高度
      autoplay={} //是否自动播放
      autoplayTimeout={} //过渡时间
      renderItem={item => {
       return <Image source={{ uri: item.imageSource }} style={{ flex: 1 }} />;
      }} //图片
/>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to deal with the local development environment cannot be accessed by IP

vue processes the data obtained by storejs

The above is the detailed content of Detailed explanation of the steps to use the react-native package plug-in swiper. For more information, please follow other related articles on the PHP Chinese website!