成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

justjavac / 3511人閱讀

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

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

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

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

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

先來看看它是什么樣子：

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

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

我們以實(shí)例化兩個(gè)狀態(tài)變量開始.一個(gè)用于存儲(chǔ) pan 值,另一個(gè)存儲(chǔ)動(dòng)畫進(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)在,我們需要?jiǎng)?chuàng)建一個(gè) panResponder. 這是一個(gè)復(fù)雜的手勢(shì)操控的概念,它判斷什么時(shí)候應(yīng)該激活手勢(shì)以及們完成事件的各種方法.在我們的例子中,我們要在手勢(shì)正在進(jìn)行和結(jié)束對(duì)它進(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
  }
})

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

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

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

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

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

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

paramaggarwal/rn-paper-interface

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

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

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

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

活動(dòng)預(yù)告

報(bào)名鏈接：http://t.cn/Rt9ooRw

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/80152.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

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

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

  • 2016-JavaScript之星

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

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

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

0條評(píng)論

閱讀需要支付1元查看
<