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

資訊專欄INFORMATION COLUMN

使用 React Native 構(gòu)建 Facebook Paper 類似的 UI

justjavac / 3460人閱讀

摘要：我模仿的應(yīng)用構(gòu)建了一個開閉卡片的輪播效果作為技術(shù)演示它使用了及其動畫庫當(dāng)人們聽到后第一反應(yīng)會覺得它運(yùn)行緩慢這是因為一般人會去這樣解釋它允許你通過構(gòu)建你的應(yīng)用程序而人們會認(rèn)為瀏覽器中運(yùn)行的性能并不夠好但事實是它采用的全部都是原生界面元素但你通

我模仿 Facebook 的 Paper 應(yīng)用構(gòu)建了一個開閉卡片的輪播效果作為技術(shù)演示.它使用了 React Native 及其動畫庫.

當(dāng)人們聽到 React Native 后第一反應(yīng)會覺得它運(yùn)行緩慢.這是因為一般人會去這樣解釋 React Native: "它允許你通過 Javascript 構(gòu)建你的應(yīng)用程序",而人們會認(rèn)為瀏覽器中運(yùn)行的 JavaScript 性能并不夠好.

但事實是,它采用的全部都是原生界面元素.但你通過 React Native 構(gòu)建界面時, 每次都會實例化 Android 和 iOS 的原生 UI.因此,相比于比較沉重的 DOM 結(jié)構(gòu)它是相當(dāng)請輕量的.

下面一段介紹:我是如何著手構(gòu)建類似 Facebook 的 Paper 應(yīng)用的交互效果的. 我們可以放大和縮小輪播圖,在動畫進(jìn)行的時候,我們也可以停止它.

先來看看它是什么樣子：

上面的屏幕截圖,是從我所構(gòu)建的 App 中截出來的. 左邊是當(dāng)前縮小的卡片列表.您可以滑動它們.您也可以把它拉起來,讓它們變成全屏. 現(xiàn)在你可以在全屏狀態(tài)下滑動卡片,一個接一個. 我們來與下面 Facebook Paper應(yīng)用的交互模型來進(jìn)行比較.

點(diǎn)這里查看 Youtube 上的視頻

我們以實例化兩個狀態(tài)變量開始.一個用于存儲 pan 值,另一個存儲動畫進(jìn)度:從0到1.這一進(jìn)展變量是基于 pan 值進(jìn)行插值.

let pan = new Animated.ValueXY();
this.state = {
  pan: pan,
  dockAnimation: pan.y.interpolate({
    inputRange: [-300, 0],
    outputRange: [0, 1],
  })
}

現(xiàn)在,我們需要創(chuàng)建一個 panResponder. 這是一個復(fù)雜的手勢操控的概念,它判斷什么時候應(yīng)該激活手勢以及們完成事件的各種方法.在我們的例子中,我們要在手勢正在進(jìn)行和結(jié)束對它進(jìn)行跟蹤.

this._panResponder = PanResponder.create({
  onStartShouldSetPanResponder: (evt, gestureState) => true,
  onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
  onMoveShouldSetPanResponder: (evt, gestureState) => true,
  onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
  onPanResponderGrant: () => {},
  onPanResponderMove: Animated.event([null, {dx: this.state.pan.x, dy: this.state.pan.y}]),
  onPanResponderRelease: (evt, gestureState) => {
    // dragging stopped, animate the item to the correct position
  }
})

在實際代碼中可以看到看到 onPanResponderRelease 塊的全部實現(xiàn).它做的很簡單:決定用戶是否已經(jīng)拖遠(yuǎn)遠(yuǎn),并切換 state 的值.如果是,繪制這個動畫.

transform: [{
  scale: this.state.dockAnimation.interpolate({
    inputRange: [0, 1],
    outputRange: [1, 0.5],
  })
}

多種變換被以 ListView 的 style 的方式應(yīng)用. 我已經(jīng)用 scale 變換作為例子展示了,再一次,我們使用插值來控制動畫.

最后,styles 和 panResponder 的 panResponder 都被綁定到了 ListView. 需要注意的是在我們創(chuàng)建了一個一個組合式的 ListView: AnimatedListView,這樣的動畫庫可以從樣式對象解析出動畫的值.

這就是我們需要為動畫做的所有事情!剩下的就是使用 Flex 布局來構(gòu)建那些漂亮的卡片.Jason Brown 寫了一本有關(guān)React Native動畫庫的好書：http://browniefed.com/react-n...

我在 Github 上共享了所有的代碼,你可以自由修改它！

paramaggarwal/rn-paper-interface

目前,我只在iOS上運(yùn)行過.但是你可以嘗試在 Android 上運(yùn)行,并在 github 上打開一個 PR. 我沒有用過任何的 iOS 特定的 API, 所以理論上,它應(yīng)該在 Android 上工作.

作者信息
原文作者：Param Aggarwal
原文鏈接：http://t.cn/RtnSJwA
翻譯自力譜宿云 LeapCloud旗下MaxLeap團(tuán)隊_UX成員：Jason
中文首發(fā)地址：https://blog.maxleap.cn/archi...
譯者簡介：MaxLeap UX 組負(fù)責(zé)人,負(fù)責(zé)前端開發(fā),客戶端/部分服務(wù)端 SDK 開發(fā)及開發(fā)者用戶體驗優(yōu)化相關(guān)工作. 持續(xù)關(guān)注新技術(shù),熱愛產(chǎn)品, 熱衷全棧/全端開發(fā). 曾供職于搜狐搜狐武漢研究院,后投身 MaxLeap致力于為開發(fā)者提供快速高效的開發(fā)體驗.

相關(guān)文章
ReactJS 開發(fā)過程中的一些使用心得
在 React Web 和 原生 App 中共享代碼
React Native 一周年回顧
React.js 最佳實踐(2016)

作者往期作品：
在 React Web 和 原生 App 中共享代碼
React.js 最佳實踐(2016)

活動預(yù)告

報名鏈接：http://t.cn/Rt9ooRw

歡迎關(guān)注微信公眾號：MaxLeap_yidongyanfa

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

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

相關(guān)文章

  • 11個React Native 組件庫和 Javascript 數(shù)據(jù)可視化庫

    摘要：數(shù)據(jù)可視化庫超過的的可能是最流行和最廣泛的數(shù)據(jù)可視化庫。是一組組件，用于高效地渲染大型列表和表格數(shù)據(jù)。一種優(yōu)雅而靈活的方式，可以利用組件來支持實際的數(shù)據(jù)可視化。 想閱讀更多優(yōu)質(zhì)文章請猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你！ React Native 組件庫 1. NativeBase showImg(https://segmentfault.com/img/bVbrLHH?w=...

    tangr206 評論0 收藏0

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

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

    Barry_Ng 評論0 收藏0

  • 2019年，F(xiàn)lutter 和 React Native 誰主沉浮?

    摘要：移動行業(yè)渴望進(jìn)行一場革命，以遏制移動應(yīng)用程序開發(fā)過程中出現(xiàn)的問題。毫無疑問，它得到很好的回應(yīng)。如今，是沃爾瑪優(yōu)步和特斯拉等應(yīng)用程序的幕后支持者。由制作，而受社區(qū)青睞。然而，目前，的只有和支持。在提供靈活性和定制方面，顯然處于領(lǐng)先地位。 Flutter 與 React Native混淆了嗎？ 本文是幫助你了解這兩個應(yīng)用程序開發(fā)框架區(qū)別指南。咱們知道，幾年前開發(fā)和維護(hù)iOS和Android...

    xioqua 評論0 收藏0

  • 從 1 到完美，用 js 和 react-native 寫一個 APP

    摘要：從到完美，用和寫一個在年開源了后，緊接著在年就又開源了，就此打開了用和前端技術(shù)寫原生之路。對應(yīng)來看，程序只有兩個部分，和，而部分則分為組件和。所以，在端的純庫無在中同樣適用，如等。應(yīng)用實例便是使用開發(fā)的一個日記。 從 1 到完美，用 js 和 react-native 寫一個 APP facebook 在 2013 年開源了 react 后，緊接著在 2015 年就又開源了 react...

    CollinPeng 評論0 收藏0

  • 2016-JavaScript之星

    摘要：在，是當(dāng)之無愧的王者，贏得了與之間的戰(zhàn)爭，攻陷了的城池。于月發(fā)布了版本，這一版本為了更好的表現(xiàn)加入了渲染方式。前端框架這個前端框架清單可能是年疲勞的元兇之一。的創(chuàng)建者，目前在工作為尋找構(gòu)建簡單性和自主配置性之間的平衡做了很大的貢獻(xiàn)。 春節(jié)后的第一篇就從這個開始吧~本文已在前端早讀課公眾號上首發(fā) 原文鏈接 JavasScript社區(qū)在創(chuàng)新的道路上開足了馬力，曾經(jīng)流行過的也許一個月之后就過...

    Binguner 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<