国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

使用 React Native 構建 Facebook Paper 類似的 UI

justjavac / 3453人閱讀

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

我模仿 Facebook 的 Paper 應用構建了一個開閉卡片的輪播效果作為技術演示.它使用了 React Native 及其動畫庫.

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

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

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

先來看看它是什么樣子：

上面的屏幕截圖,是從我所構建的 App 中截出來的. 左邊是當前縮小的卡片列表.您可以滑動它們.您也可以把它拉起來,讓它們變成全屏. 現在你可以在全屏狀態下滑動卡片,一個接一個. 我們來與下面 Facebook Paper應用的交互模型來進行比較.

點這里查看 Youtube 上的視頻

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

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

現在,我們需要創建一個 panResponder. 這是一個復雜的手勢操控的概念,它判斷什么時候應該激活手勢以及們完成事件的各種方法.在我們的例子中,我們要在手勢正在進行和結束對它進行跟蹤.

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 塊的全部實現.它做的很簡單:決定用戶是否已經拖遠遠,并切換 state 的值.如果是,繪制這個動畫.

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

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

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

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

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

paramaggarwal/rn-paper-interface

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

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

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

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

活動預告

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

歡迎關注微信公眾號：MaxLeap_yidongyanfa

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80152.html

相關文章

  • 11個React Native 組件庫和 Javascript 數據可視化庫

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

    tangr206 評論0 收藏0

  • 前端每周清單半年盤點之 React 與 ReactNative 篇

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

    Barry_Ng 評論0 收藏0

  • 2019年，Flutter 和 React Native 誰主沉浮?

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

    xioqua 評論0 收藏0

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

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

    CollinPeng 評論0 收藏0

  • 2016-JavaScript之星

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

    Binguner 評論0 收藏0

發表評論

0條評論

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