Detailed explanation of the steps to use the react-native package plug-in swiper-JS Tutorial-php.cn

This time I will bring you a detailed explanation of the steps for using the react-native packaging plug-in swiper. What are theprecautionswhen 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

Copy after login

. 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 = (    ); const dot = ; 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 (  this.handleItemPress(item)}> {this.props.renderItem(item)}  ); } render() { return this.props.data.length === 0 || !this.state.showSwiper ? null : (  {this.props.data.map((item, idx) => this._renderSwiperItem(item, idx))} //如果数据是个对象里面的数组加一个循环  ); } }

Copy after login

This is the index.js file

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

Copy after login

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

Copy after login

Component list

carousel (carousel component)

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

Usage:

Props:

##data Carousel data source Array - height Height of Carousel number 150 onPressItem Triggered when Carousel Item is clicked fn - renderItem For specific methods of rendering Item, please refer to FlatList fn - autoplay Whether to switch automatically bool true autoplayTimeout Item automatic switching time interval (unit s) number 2.5

Properties	Description	Type	Default value

Where to import

import { HigoCarousel } from '../../components';  { return ; }} //图片 />

Copy after login

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!