欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

react-native封裝插件swiper的使用方法

 更新時(shí)間:2018年03月20日 10:28:58   作者:sunshinezhong  
這篇文章主要介紹了react-native封裝插件swiper的使用方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

首先創(chuàng)建簡(jiǎn)單的react-native項(xiàng)目,創(chuàng)建一個(gè)文件夾。然后用命令符輸入

react-native init swiper

創(chuàng)建完成之后開(kāi)發(fā)項(xiàng)目,我用的vs

打開(kāi)控制臺(tái),安裝swiper依賴。

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

啟動(dòng)app項(xiàng)目

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

開(kāi)始上碼,在src里面創(chuàng)建個(gè)components文件夾下邊創(chuàng)建個(gè)swiper.js文件,以及index.js,加上說(shuō)明文檔

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: {
  //圓點(diǎn)樣式
 },
 activeDotStyle: {
  //圓點(diǎn)樣式
 },
 dotStyle: {
  //圓點(diǎn)樣式
 }
});

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} //是否自動(dòng)輪播
    autoplayTimeout={this.props.autoplayTimeout} //輪播秒數(shù)
   >
    {this.props.data.map((item, idx) => this._renderSwiperItem(item, idx))} //如果數(shù)據(jù)是個(gè)對(duì)象里面的數(shù)組加一個(gè)循環(huán)
   </RNSwiper>
  );
 }
}

這是index.js文件

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

export { Carousel };

公共組件庫(kù)

這里用于放置與業(yè)務(wù)無(wú)關(guān)的公共組件。組件實(shí)現(xiàn)必須考慮靈活性,擴(kuò)展性,不能包含具體的業(yè)務(wù)邏輯。

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

一個(gè)基本的組件結(jié)構(gòu):

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(輪播組件)

主要用于通用的圖片輪播,能夠提供點(diǎn)擊事件響應(yīng)。

Usage:

Props:

屬性 描述 類型 默認(rèn)值
data Carousel數(shù)據(jù)源 Array -
height Carousel的高度 number 150
onPressItem 點(diǎn)擊Carousel Item的時(shí)候觸發(fā) fn -
renderItem 具體的渲染Item的方法,請(qǐng)參考FlatList fn -
autoplay 是否自動(dòng)切換 bool true
autoplayTimeout Item自動(dòng)切換的時(shí)間間隔(單位s) number 2.5

需要導(dǎo)入的地方

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

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • react進(jìn)階教程之異常處理機(jī)制error?Boundaries

    react進(jìn)階教程之異常處理機(jī)制error?Boundaries

    在react中一旦出錯(cuò),如果每個(gè)組件去處理出錯(cuò)情況則比較麻煩,下面這篇文章主要給大家介紹了關(guān)于react進(jìn)階教程之異常處理機(jī)制error?Boundaries的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-08-08
  • react-beautiful-dnd拖拽排序功能的實(shí)現(xiàn)過(guò)程

    react-beautiful-dnd拖拽排序功能的實(shí)現(xiàn)過(guò)程

    這篇文章主要介紹了react-beautiful-dnd拖拽排序功能的實(shí)現(xiàn)過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-07-07
  • react表單受控的實(shí)現(xiàn)方案

    react表單受控的實(shí)現(xiàn)方案

    數(shù)據(jù)的受控控制一直是react里的一個(gè)痛點(diǎn),當(dāng)我想要實(shí)現(xiàn)一個(gè)輸入框的受控控制時(shí),我需要定義一個(gè)onChange和value,手動(dòng)去實(shí)現(xiàn)數(shù)據(jù)的綁定,本文小編給大家介紹了react表單受控的實(shí)現(xiàn)方案,需要的朋友可以參考下
    2023-12-12
  • React項(xiàng)目如何使用Element的方法步驟

    React項(xiàng)目如何使用Element的方法步驟

    本文主要介紹了React項(xiàng)目如何使用Element的方法步驟,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-11-11
  • React表單容器的通用解決方案

    React表單容器的通用解決方案

    本文主要介紹了React表單容器的通用解決方案,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-04-04
  • 在?React?Native?中使用?CSS?Modules的配置方法

    在?React?Native?中使用?CSS?Modules的配置方法

    有些前端工程師希望也能像開(kāi)發(fā) web 應(yīng)用那樣,使用 CSS Modules 來(lái)開(kāi)發(fā) React Native,本文將介紹如何在 React Native 中使用 CSS Modules,需要的朋友可以參考下
    2022-08-08
  • React+ts實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)效果

    React+ts實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)效果

    這篇文章主要為大家詳細(xì)介紹了React+ts實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-09-09
  • React Native中WebView與html雙向通信遇到的坑

    React Native中WebView與html雙向通信遇到的坑

    這篇文章主要介紹了React Native中WebView與html雙向通信的一些問(wèn)題,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧
    2023-01-01
  • React用法之高階組件的用法詳解

    React用法之高階組件的用法詳解

    高階組件也就是我們常說(shuō)的HOC,是React中用于復(fù)用組件邏輯的一種高級(jí)技巧。這篇文章主要通過(guò)一些示例帶大家學(xué)習(xí)一下高階組件的使用,希望對(duì)大家有所幫助
    2023-04-04
  • react顯示文件上傳進(jìn)度的示例

    react顯示文件上傳進(jìn)度的示例

    這篇文章主要介紹了react顯示文件上傳進(jìn)度的示例,幫助大家更好的理解和學(xué)習(xí)使用react,感興趣的朋友可以了解下
    2021-04-04

最新評(píng)論