国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

在項目中如何應用swiper

來源:懂視網 責編:小采 時間:2020-11-27 19:36:57
文檔

在項目中如何應用swiper

在項目中如何應用swiper:這次給大家帶來在項目中如何應用swiper,在項目中應用swiper的注意事項有哪些,下面就是實戰案例,一起來看一下。首先創建簡單的react-native項目,創建一個文件夾。然后用命令符輸入react-native init swiper創建完成之后開發項目,我用的vs打開控制臺,安
推薦度:
導讀在項目中如何應用swiper:這次給大家帶來在項目中如何應用swiper,在項目中應用swiper的注意事項有哪些,下面就是實戰案例,一起來看一下。首先創建簡單的react-native項目,創建一個文件夾。然后用命令符輸入react-native init swiper創建完成之后開發項目,我用的vs打開控制臺,安
這次給大家帶來在項目中如何應用swiper,在項目中應用swiper的注意事項有哪些,下面就是實戰案例,一起來看一下。

首先創建簡單的react-native項目,創建一個文件夾。然后用命令符輸入

react-native init swiper

創建完成之后開發項目,我用的vs

打開控制臺,安裝swiper依賴。

安裝:npm i react-native-swiper --save
查看:npm view react-native-swiper
刪除:npm rm react-native-swiper --save
這里還需要 npm i 下更新下本地的依賴庫

啟動app項目

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

開始上碼,在src里面創建個components文件夾下邊創建個swiper.js文件,以及index.js,加上說明文檔

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>
 );
 }
}

這是index.js文件

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

公共組件庫

這里用于放置與業務無關的公共組件。組件實現必須考慮靈活性,擴展性,不能包含具體的業務邏輯。

組件必須以 你做的業務命名 為前綴,如 TryCarousel.js 。每個組件必須單獨放在目錄中,目錄必須全小寫(中橫線分割),如 carousel/TryCarousel.js 。

一個基本的組件結構:

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

組件列表

carousel(輪播組件)

主要用于通用的圖片輪播,能夠提供點擊事件響應。

Usage:

Props:

屬性描述類型默認值
dataCarousel數據源Array-
heightCarousel的高度number150
onPressItem點擊Carousel Item的時候觸發fn-
renderItem具體的渲染Item的方法,請參考FlatListfn-
autoplay是否自動切換booltrue
autoplayTimeoutItem自動切換的時間間隔(單位s)number2.5

需要導入的地方

import { HigoCarousel } from '../../components';
<Carousel
 data={} //接受的數據
 onPressItem={} //點擊事件
 height={} //圖片高度
 autoplay={} //是否自動播放
 autoplayTimeout={} //過渡時間
 renderItem={item => {
 return <Image source={{ uri: item.imageSource }} style={{ flex: 1 }} />;
 }} //圖片
/>

相信看了本文案例你已經掌握了方法,更多精彩請關注Gxl網其它相關文章!

推薦閱讀:

vue-router內query動態傳參如何處理

如何操作nodejs對密碼進行加密

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

在項目中如何應用swiper

在項目中如何應用swiper:這次給大家帶來在項目中如何應用swiper,在項目中應用swiper的注意事項有哪些,下面就是實戰案例,一起來看一下。首先創建簡單的react-native項目,創建一個文件夾。然后用命令符輸入react-native init swiper創建完成之后開發項目,我用的vs打開控制臺,安
推薦度:
標簽: 中的 使用 如何
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 亚洲欧美中文日韩在线 | 精品久久久久久综合网 | 成人免费国产欧美日韩你懂的 | 国产一区二区不卡 | 一区在线免费 | 亚洲自拍另类 | 欧美性xxxxx 欧美视频亚洲视频 | 欧美亚洲免费 | 国产精品视频一区二区三区不卡 | 久久91精品国产91久久 | 日本一二区视频 | 欧美日韩国产在线人 | 欧美视频在线免费 | 国产成人久久精品二区三区牛 | 日韩αv | 亚洲免费在线 | 日韩 国产 欧美 精品 在线 | 日本欧美一区二区三区不卡视频 | 亚洲日本激情综合在线观看 | 欧美不卡在线观看 | 日韩a在线观看免费观看 | 特黄日韩免费一区二区三区 | 久久人精品 | 久久一区二区三区四区 | 国产呦系列 欧美呦 日韩呦 | 亚洲最新 | 欧美成人精品一级高清片 | 亚洲欧美自拍偷拍 | 91精品国产高清久久久久久91 | 国产视频1 | 在线亚洲v日韩v | 国产精品自拍一区 | 色阁阁| 综合婷婷 | 日韩一区二区视频 | 亚洲伊人久久综合一区二区 | 欧美日韩综合精品一区二区三区 | 日韩精品亚洲电影天堂 | 亚洲最新 | 欧美日韩国产中文字幕 | 亚洲福利视频 |