Home > Article > Web Front-end > How to use react-native package plug-in swiper
This article mainly introduces how to use the react-native packaging plug-in swiper. Now I will share it with you and give you a reference.
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 it. Console, install swiper dependencies.
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 and create a swiper.js file under it, as well as 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: '#fff' }} 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 the 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)
is mainly used for general image carousel and can provide click event response.
Usage:
Props:
Description | Type | Default value | |
---|---|---|---|
Carousel data source | Array | - | |
Height of Carousel | number | 150 | |
Triggered when Carousel Item is clicked | fn | - | |
Specific For the method of rendering Item, please refer to FlatList | fn | - | |
Whether to automatically switch | bool | true | |
Item automatic switching time interval (unit s) | number | 2.5 |
import { HigoCarousel } from '../../components'; <Carousel data={} //接受的数据 onPressItem={} //点击事件 height={} //图片高度 autoplay={} //是否自动播放 autoplayTimeout={} //过渡时间 renderItem={item => { return <Image source={{ uri: item.imageSource }} style={{ flex: 1 }} />; }} //图片 />The above is what I compiled for everyone. I hope that in the future It will be helpful to everyone. Related articles:
Ajax asynchronous loading analysis
Ajax technology composition and core principle analysis
About the output stream at the end of the servlet in Ajax technology
The above is the detailed content of How to use react-native package plug-in swiper. For more information, please follow other related articles on the PHP Chinese website!