成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

使用 React Native 構(gòu)建類(lèi)似 Tinder 的加載器

Render / 1530人閱讀

摘要：在這篇文章中我會(huì)嘗試描述在中構(gòu)建一個(gè)類(lèi)似的加載器所遇到的調(diào)整我把它分成三個(gè)挑戰(zhàn)。我最終使用和來(lái)創(chuàng)建了一個(gè)能夠被停止的循環(huán)。有一件事仍然未處理。幸運(yùn)的是，組件有兩個(gè)事件，它們有助于處理這件事情和。

在這篇文章中我會(huì)嘗試描述在React Native中構(gòu)建一個(gè)類(lèi)似Tinder的加載器所遇到的調(diào)整
我把它分成三個(gè)挑戰(zhàn)。

挑戰(zhàn)1：布局

在上面的截圖中，你可以看到頭像和它后面的圓，都在屏幕正中間。
感謝 Flexbox，通過(guò)添加"justifyContent:"center""和"alignItems:"center""，可以輕松地將元素水平和垂直居中。在這種情況下，我不得不居中兩個(gè)元素。我可以使用 Flexbox 作為頭像或圓圈。我選擇了頭像。對(duì)于背景圓我使用"position:absolute"和負(fù)邊距來(lái)完成我的目標(biāo)。

container: {
  flex: 1,
  justifyContent: "center", // this centers the avatar vertically
  alignItems: "center", // this centers the avatar horizontally
},
circle: {
  width: circleSize,
  height: circleSize,
  position: "absolute",
  left: deviceWidth/2,
  top: deviceHeight/2,
  marginLeft: -circleSize/2,
  marginTop: -circleSize/2
}
挑戰(zhàn)2：動(dòng)畫(huà)

React Native有一個(gè)動(dòng)畫(huà)庫(kù)，稱(chēng)為Animated。我用它來(lái)放大圓圈并將其淡出。如果你知道如何使用 interpolate 方法，并在一個(gè)循環(huán)重復(fù)動(dòng)畫(huà)，圓圈的動(dòng)畫(huà)就可以解決了。
我知道，"react-native-animatable"庫(kù)提供了一個(gè)名為"iterationCount：infinitive"的屬性，但是Animated API沒(méi)有內(nèi)置這樣的功能。所以我不得不自己構(gòu)建它。
我的第一個(gè)想法是遞歸。我創(chuàng)建了一個(gè)新的函數(shù)，它設(shè)置動(dòng)畫(huà)值為零，然后在回調(diào)中把值擴(kuò)展到1，當(dāng)動(dòng)畫(huà)完成后，我再次調(diào)用該函數(shù)。

animate() {
  this.anim.setValue(0);
  Animated.timing(this.anim, {
    toValue: 1,
    duration: 3000,
    easing: Easing.in
  })
  .start(this.animate.bind(this));
}

雖然它可以工作，并且代碼看起來(lái)挺干凈，但它有一個(gè)問(wèn)題：我不能停止動(dòng)畫(huà)，它會(huì)不停的重復(fù)。
我最終使用 setInverval 和 clearInterval 來(lái)創(chuàng)建了一個(gè)能夠被停止的循環(huán)。

挑戰(zhàn)3：交互

最后的挑戰(zhàn)是與頭像的交互。每次你點(diǎn)擊它，一個(gè)新的圓圈會(huì)出現(xiàn)，而不會(huì)干擾前一個(gè)。這意味著，屏幕上可能同時(shí)有多個(gè)圓圈。我很快意識(shí)到，當(dāng)前的代碼無(wú)法運(yùn)作。
所以我創(chuàng)建了第二個(gè)組件，它代表一個(gè)單一的圓。每個(gè)圓圈都有自己的"動(dòng)畫(huà)生命周期"。我仍然使用setInterval，但現(xiàn)在它創(chuàng)建一個(gè)新的圓圈，而不是管理動(dòng)畫(huà)。當(dāng)您按下頭像時(shí)，會(huì)創(chuàng)建另一個(gè)圓圈。

setCircleInterval() {
  this.interval = setInterval(this.addCircle, 3000);
  this.addCircle();
}
addCircle() {
  this.setState({
    circles: [...this.state.circles, this.counter]
  });
  
  this.counter++;
}

有一件事仍然未處理。只要用戶(hù)按下不動(dòng)，新頭像就不再會(huì)被創(chuàng)建，直到在他釋放屏幕之后才創(chuàng)建新的圓圈。
幸運(yùn)的是，Touchable 組件有兩個(gè)事件，它們有助于處理這件事情：onPressIn 和 onPressOut。當(dāng)?shù)谝粋€(gè)事件被調(diào)用時(shí)，間隔被清除，因此不會(huì)創(chuàng)建任何新的圓，當(dāng)?shù)诙€(gè)事件被觸發(fā)時(shí)，將再次設(shè)置間隔（會(huì)再創(chuàng)建圓圈）。

onAvatarPressIn() {
  clearInterval(this.interval);
}
onAvatarPressOut() {
  this.setCircleInterval();
}
結(jié)論

這個(gè)練習(xí)花了一些時(shí)間，我對(duì)結(jié)果很滿(mǎn)意。在 React Native 中創(chuàng)建 UI 非常有趣，我期待著從 React Native 中的流行應(yīng)用程序構(gòu)建其他組件。如果您有任何想法或愿望，請(qǐng)讓我知道！

請(qǐng)查看Github上的完整代碼。

謝謝閱讀！

原文作者：Yousef Kama 原文鏈接：http://t.cn/RtnSJwA
翻譯自力譜宿云LeapCloud旗下MaxLeap團(tuán)隊(duì)_UX成員：Jason
本文首發(fā)自MaxLeap官網(wǎng)：https://maxleap.cn/ 
歡迎關(guān)注微信公眾號(hào)：MaxLeap_yidongyanfa

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/80819.html

相關(guān)文章

  • 初次嘗試使用typescript開(kāi)發(fā)react-native

    摘要：搭建開(kāi)發(fā)環(huán)境安裝和命令行工具是提供的替代的工具，可以加速模塊的下載。的命令行工具用于執(zhí)行創(chuàng)建初始化更新項(xiàng)目運(yùn)行打包服務(wù)等任務(wù)。 typescript是javascript的超集，在javascript的基礎(chǔ)上添加了可選的靜態(tài)類(lèi)型，非常適合團(tuán)隊(duì)開(kāi)，這次我們嘗試使用typescript來(lái)開(kāi)發(fā)react-native應(yīng)用。 搭建react-native開(kāi)發(fā)環(huán)境 安裝yarn和react-na...

    Hwg 評(píng)論0 收藏0

  • 前端每周清單半年盤(pán)點(diǎn)之 React 與 ReactNative 篇

    摘要：前端每周清單半年盤(pán)點(diǎn)之與篇前端每周清單專(zhuān)注前端領(lǐng)域內(nèi)容，以對(duì)外文資料的搜集為主，幫助開(kāi)發(fā)者了解一周前端熱點(diǎn)分為新聞熱點(diǎn)開(kāi)發(fā)教程工程實(shí)踐深度閱讀開(kāi)源項(xiàng)目巔峰人生等欄目。與求同存異近日，宣布將的構(gòu)建工具由遷移到，引發(fā)了很多開(kāi)發(fā)者的討論。 前端每周清單半年盤(pán)點(diǎn)之 React 與 ReactNative 篇 前端每周清單專(zhuān)注前端領(lǐng)域內(nèi)容，以對(duì)外文資料的搜集為主，幫助開(kāi)發(fā)者了解一周前端熱點(diǎn)；分為...

    Barry_Ng 評(píng)論0 收藏0

  • 【譯】React Native 動(dòng)畫(huà) API 入門(mén)實(shí)例

    摘要：簡(jiǎn)而言之，它將對(duì)動(dòng)畫(huà)中變化的屬性數(shù)值做插值運(yùn)算并且刷新視圖。注意我們所建立的的是的一個(gè)實(shí)例。最后我們使用，表示這個(gè)組件是可動(dòng)畫(huà)組件。一直不停動(dòng)動(dòng)畫(huà)序列的方法可以傳一個(gè)回調(diào)函數(shù)，在動(dòng)畫(huà)全部執(zhí)行完時(shí)觸發(fā)。 翻譯自 React-native Animated API Basic Example 翻譯過(guò)程中有刪改 簡(jiǎn)介 本文是探索 react-native 中實(shí)現(xiàn)的的 Animated AP...

    qianfeng 評(píng)論0 收藏0

  • React Native 簡(jiǎn)介：用 JavaScript 搭建 iOS 應(yīng)用 (1)

    摘要：利用來(lái)搭建代碼。雖然這不是安裝的唯一方式，但我發(fā)現(xiàn)，是非常好用的包管理器。終端窗口打開(kāi)后，會(huì)啟動(dòng)，并由服務(wù)器處理以上請(qǐng)求。面對(duì)這種情況時(shí)，需要關(guān)閉終端窗口，停止在上的應(yīng)用，并重新運(yùn)行。使用設(shè)定應(yīng)用的用戶(hù)界面。命名這兩個(gè)文件為和。 【編者按】本篇文章的作者是 Joyce Echessa——渥合數(shù)位服務(wù)創(chuàng)辦人，畢業(yè)于臺(tái)灣大學(xué)，近年來(lái)專(zhuān)注于協(xié)助客戶(hù)進(jìn)行 App 軟體以及網(wǎng)站開(kāi)發(fā)。本篇文章中，...

    xiaoqibTn 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<