基于React Native 0.52實(shí)現(xiàn)輪播圖效果
本文基于React Native 0.52
Demo上傳到Git了，有需要可以看看，寫了新內(nèi)容會(huì)上傳的（Git地址）
一、總覽
輪播圖幾乎是必備的效果，這里選擇 react-native-swiper 來實(shí)現(xiàn)，效果如下圖：
二、實(shí)現(xiàn)輪播圖效果
1、通過npm安裝react-native-swiper
npm install react-native-swiper --save
2、在recommend.js引入react-native-swiper
import Swiper from 'react-native-swiper';
3、用 react-native-swiper 可以很容易的實(shí)現(xiàn)輪播的效果
- showButtons —— 是否顯示左右翻頁(yè)按鈕
- autoPlay —— 是否自動(dòng)播放
- paginationStyle —— 包含小點(diǎn)點(diǎn)的容器的樣式，這里用來調(diào)整位置
- dotStyle —— 小點(diǎn)點(diǎn)的樣式
- activeDotStyle —— 當(dāng)前被激活的小點(diǎn)點(diǎn)的樣式
<Swiper
style={styles.wrapper}
height={width*40/75}
showsButtons={false}
autoplay={true}
paginationStyle={styles.paginationStyle}
dotStyle={styles.dotStyle}
activeDotStyle={styles.activeDotStyle}
>
<Image source={require('../../img/1.jpg')} style={styles.bannerImg} />
<Image source={require('../../img/2.jpg')} style={styles.bannerImg} />
<Image source={require('../../img/3.jpg')} style={styles.bannerImg} />
<Image source={require('../../img/4.jpg')} style={styles.bannerImg} />
<Image source={require('../../img/3.jpg')} style={styles.bannerImg} />
</Swiper>
樣式：
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
backgroundColor: '#fff',
},
bannerImg: {
height: width*40/75,
width: width,
},
wrapper: {
width: width,
},
paginationStyle: {
bottom: 6,
},
dotStyle: {
width: 22,
height: 3,
backgroundColor:'#fff',
opacity: 0.4,
borderRadius: 0,
},
activeDotStyle: {
width: 22,
height: 3,
backgroundColor:'#fff',
borderRadius: 0,
},
});
三、解決不顯示問題
輪播圖放在APP的首頁(yè)，同樣有不顯示的問題，解決辦法和上一篇的辦法幾乎一樣，可以看一下上一篇或是完整代碼，這里就不再贅述。
這里和上一篇相比有兩處不一樣，需要說一下。
1、真正調(diào)用接口加載圖片的時(shí)候，不會(huì)出現(xiàn)一開始圖片不顯示的問題。
2、在狀態(tài)為false的時(shí)候，先顯示第一張圖片
if (this.state.swiperShow) {
return (
<Swiper >
…………略
</Swiper>
)
} else {
return (
<View style={{ height: width*40/75 }}>
<Image source={require('../../img/1.jpg')} style={styles.bannerImg} />
</View>
);
}
recommend.js完整代碼 地址
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
React ts模式使用http-proxy-middleware代理時(shí)訪問報(bào)404問題
這篇文章主要介紹了React ts模式使用http-proxy-middleware代理時(shí)訪問報(bào)404問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
Remix集成antd和pro-components的過程示例
這篇文章主要為大家介紹了Remix集成antd和pro-components的過程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
深入理解React調(diào)度(Scheduler)原理
本文主要介紹了深入理解React調(diào)度(Scheduler)原理，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
React報(bào)錯(cuò)之Parameter event implicitly has a
這篇文章主要為大家介紹了React報(bào)錯(cuò)之Parameter event implicitly has an any type，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
在React組件中,如果使用useState管理searchKey,每次輸入變化都會(huì)導(dǎo)致組件重新渲染,從而生成新的debounce函數(shù),導(dǎo)致防抖功能失效,解決方法是使用useRef定義searchKey為非響應(yīng)式數(shù)據(jù),從而維持debounce函數(shù)的穩(wěn)定,確保防抖功能有效,感興趣的朋友跟隨小編一起看看吧2024-10-10
這篇文章主要介紹了mobx在react hooks中的應(yīng)用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
本篇文章主要介紹了詳解React開發(fā)必不可少的eslint配置，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02
詳解react、redux、react-redux之間的關(guān)系
這篇文章主要介紹了詳解react、redux、react-redux之間的關(guān)系，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
React實(shí)現(xiàn)一個(gè)拖拽排序組件的示例代碼
這篇文章主要給大家介紹了React實(shí)現(xiàn)一個(gè)拖拽排序組件?-?支持多行多列、支持TypeScript、支持Flip動(dòng)畫、可自定義拖拽區(qū)域,文章通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
使用 Rails API 構(gòu)建一個(gè) React 應(yīng)用程序的詳細(xì)步驟
這篇文章主要介紹了使用 Rails API 構(gòu)建一個(gè) React 應(yīng)用程序的詳細(xì)步驟，主要包括后端：Rails API部分，前端：React部分及React組件的相關(guān)操作，具有內(nèi)容詳情跟隨小編一起看看吧2021-08-08