首先建立簡單的react-native項目,建立一個文件夾。而後用命令符輸入react
react-native init swiper
複製代碼
建立完成以後開發項目,我用的vsandroid
打開控制檯,安裝swiper依賴。ios
安裝:npm i react-native-swiper --save
查看:npm view react-native-swiper
刪除:npm rm react-native-swiper --save
這裏還須要 npm i 下更新下本地的依賴庫
複製代碼
啓動app項目npm
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 };
複製代碼
這裏用於放置與業務無關的公共組件。組件實現必須考慮靈活性,擴展性,不能包含具體的業務邏輯。react-native
組件必須以 你作的業務命名
爲前綴,如 TryCarousel.js
。每一個組件必須單獨放在目錄中,目錄必須全小寫(中橫線分割),如 carousel/TryCarousel.js
。數組
一個基本的組件結構:bash
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() {}
}
複製代碼
主要用於通用的圖片輪播,可以提供點擊事件響應。app
Usage:flex
複製代碼
Props:
屬性 | 描述 | 類型 | 默認值 |
---|---|---|---|
data | Carousel數據源 | Array | - |
height | Carousel的高度 | number | 150 |
onPressItem | 點擊Carousel Item的時候觸發 | fn | - |
renderItem | 具體的渲染Item的方法,請參考FlatList | fn | - |
autoplay | 是否自動切換 | bool | true |
autoplayTimeout | Item自動切換的時間間隔(單位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 }} />;
}} //圖片
/>
複製代碼