跳到主要內容

標籤為「announcement」的文章共 51 篇

檢視所有標籤

2018 年 React Native 社群現況

·4 分鐘閱讀時間
Lorenzo Sciandra
核心維護者 & React Native 開發者

在 2018 年,React Native 社群對我們開發和溝通 React Native 的方式進行了許多變更。我們相信,幾年後回顧,我們會發現這次轉變是 React Native 的轉捩點。

許多人對 React Native 架構的重寫感到興奮,這項重寫廣為人知,名稱為 Fabric。除其他事項外,這將修正 React Native 架構中的基本限制,並為 React Native 未來的成功奠定基礎,並搭配 JSI 和 TurboModules

2018 年最大的轉變是賦予 React Native 社群權力。從一開始,Facebook 就鼓勵來自世界各地的開發人員參與 React Native 的開放原始碼專案。從那時起,出現了許多核心貢獻者來處理(除其他事項外)發佈流程。

這些成員採取了一些實質性步驟,透過以下資源,讓整個社群更有能力塑造此專案的未來

react-native-releases 📬

此存放庫於 1 月建立,具有雙重目的,讓所有人都能以更協作的方式掌握新版本,並針對特定版本中應包含的內容開啟對話,供任何想要建議 cherry-pick 的人參與(例如針對 0.57.8 及其所有先前版本)。

這是擺脫每月發佈週期,以及目前用於 0.57.x 版本的「長期支援」方法的驅動力。

達到這些決策的一半功勞歸功於今年建立的另一個存放庫

discussions-and-proposals 🗣

此存放庫於 7 月建立,擴展了關於 React Native 對話的更開放環境的想法。先前,此需求由主要存放庫中標示為 For Discussion 的問題處理,但我們希望將此策略擴展到其他函式庫(例如 React)擁有的 RFC 方法。

此實驗立即在 React Native 生命週期中找到其角色。Facebook 團隊現在正在使用社群 RFC 流程來討論 React Native 中可以改進之處,並協調圍繞 Lean Core 專案 的工作 - 以及其他有趣的討論。

@ReactNativeComm 🐣

我們知道我們溝通這些工作的方式並不如我們希望的有效,為了讓大家更容易掌握 React Native 社群中正在發生的所有事情(從發佈到積極討論),我們建立了一個新的 Twitter 帳戶,您可以信賴 @ReactNativeComm

如果您不使用該社群網路,請記住您始終可以透過 GitHub 監看存放庫;此功能在過去幾個月中有所改進,可以僅針對發佈收到通知,因此您應該考慮無論如何都使用它。

未來展望 🎓

在過去 7-8 個月中,核心貢獻者強化了 React Native 社群 GitHub 組織,以在 React Native 的開發中承擔更多所有權,並加強與 Facebook 的協作。但這始終缺乏類似專案可能有的正式結構。

此組織可以為更廣大的開發人員社群中的每個人樹立榜樣,方法是對其中託管的所有套件/存放庫強制執行一套標準,為維護者提供一個單一位置,以互相幫助並貢獻符合社群協議標準的高品質程式碼。

在 2019 年初,我們將制定這套新的指導方針。請在 專門的討論 中告訴我們您的想法。

我們相信,透過這些變更,社群將變得更具協作性,以便當我們達到 1.0 版本時,我們都將繼續透過利用這種共同努力來編寫(更多)出色的應用程式 🤗


我希望您和我們一樣對這個社群的未來感到興奮。我們很高興看到你們所有人參與列出的存放庫中正在發生的對話,或透過您將產生的出色程式碼參與。

祝您編碼愉快!

開放原始碼藍圖

·5 分鐘閱讀時間
Héctor Ramos
Facebook 工程師

今年,React Native 團隊專注於大規模的 React Native 重新架構。正如 Sophie 在她的 React Native 現況 文章中提到的,我們已草擬一項計畫,以更好地支援 Facebook 以外蓬勃發展的 React Native 使用者和協作者群體。現在是時候分享更多關於我們一直在做的事情的詳細資訊了。在我這樣做之前,我想先闡述我們對 React Native 在開放原始碼中的長期願景。

我們對 React Native 的願景是...

  • 一個健全的 GitHub 存放庫。問題和提取請求在合理的時間內得到處理。
    • 提高測試覆蓋率。
    • 從 Facebook 程式碼存放庫同步輸出的提交不應中斷開放原始碼測試。
    • 更大規模的有意義的社群貢獻。
  • 穩定的 API,使其更容易與開放原始碼相依性介接。
    • Facebook 使用與開放原始碼相同的公開 API
    • 遵循語意化版本控制的 React Native 版本發佈。
  • 一個充滿活力的生態系統。由社群維護的高品質 ViewManager、原生模組和多平台支援。
  • 出色的文件。專注於協助使用者建立高品質的體驗,以及最新的 API 參考文件。

我們已確定以下重點領域,以協助我們實現此願景。

✂️ 精簡核心

我們的目標是透過移除非核心和未使用的組件來 減少 React Native 的表面積。我們將把非核心組件轉移到社群,使其能夠更快地發展。縮小的表面積將使管理對 React Native 的貢獻變得更容易。

WebView 是我們轉移到社群的組件範例。我們正在開發一個工作流程,讓內部團隊在我們從存放庫中移除這些組件後,能夠繼續使用它們。我們已識別出 數十個更多組件,我們將把這些組件的所有權授予社群。

🎁 開放原始碼內部組件和 🛠更新工具

Facebook 產品團隊的 React Native 開發體驗可能與開放原始碼非常不同。在開放原始碼社群中可能流行的工具在 Facebook 中未使用。可能有內部工具可以達到相同的目的。在某些情況下,Facebook 團隊已經習慣了在 Facebook 之外不存在的工具。當我們開放原始碼即將推出的架構工作時,這些差異可能會帶來挑戰。

我們將致力於發佈其中一些內部工具。我們也將改進對開放原始碼社群中流行的工具的支援。以下是我們將處理的專案的非詳盡清單

  • 開放原始碼 JSI 並讓社群能夠引入自己的 JavaScript VM,取代 RN 初始版本中的現有 JavaScriptCore。我們將在未來的文章中介紹 JSI 是什麼,同時您可以從 Parashuram 在 React Conf 上的演講 中了解更多關於 JSI 的資訊。
  • 在 Android 上支援 64 位元函式庫。
  • 在新架構下啟用除錯。
  • 改進對 CocoaPods、Gradle、Maven 和新的 Xcode 建置系統的支援。

✅ 測試基礎架構

當 Facebook 工程師發佈程式碼時,如果程式碼通過所有測試,則認為可以安全地落地。這些測試會識別變更是否可能會中斷我們自己的 React Native 介面之一。然而,Facebook 使用 React Native 的方式存在差異。這讓我們在不知不覺中中斷了開放原始碼中的 React Native。

我們將加強我們的內部測試,以確保它們在盡可能接近開放原始碼的環境中執行。這將有助於防止中斷這些測試的程式碼進入開放原始碼。我們也將致力於基礎架構,以在 GitHub 上實現對核心存放庫的更好測試,使未來的提取請求能夠輕鬆包含測試。

結合縮小的表面積,這將使貢獻者能夠更快、更有信心地合併提取請求。

📜 公開 API

Facebook 將透過公開 API(與開放原始碼相同的方式)使用 React Native,以減少意外的重大變更。我們已開始轉換內部呼叫站點以解決此問題。我們的目標是收斂到穩定的公開 API,從而在 1.0 版本中採用語意化版本控制。

📣 溝通

React Native 是 GitHub 上 貢獻者人數最多的開放原始碼專案之一。這讓我們非常高興,我們希望繼續保持下去。我們將繼續致力於促成參與貢獻者的倡議,例如提高透明度和公開討論。文件是初次接觸 React Native 的人會遇到的第一件事之一,但它並非優先事項。我們希望解決這個問題,首先是恢復自動產生的 API 參考文件,建立更多專注於建立 高品質使用者體驗 的內容,並改進我們的 發佈說明

時程

我們計畫在明年左右完成這些專案。其中一些工作已經在進行中,例如 JSI 已在開放原始碼中落地。其他工作則需要更長的時間才能完成,例如縮小表面積。我們將盡最大努力讓社群隨時掌握我們的進度。請加入我們的 討論和提案 存放庫,這是 React Native 社群的一項倡議,促成了本藍圖中討論的幾項倡議的創建。

發佈 0.56

·5 分鐘閱讀時間
Lorenzo Sciandra
Drivetribe 核心維護者 & React Native 開發者

期待已久的 React Native 0.56 版本現已推出 🎉。此部落格文章重點介紹了此新版本中引入的 變更。我們也想藉此機會解釋自 3 月以來我們一直忙於做什麼。

重大變更困境,或「何時發佈?」

貢獻者指南 解釋了所有對 React Native 的變更都必須經歷的整合流程。該專案由 許多不同的工具 組成,需要協調和持續支援才能使一切正常運作。再加上為專案做出貢獻的充滿活力的開放原始碼社群,您將感受到其令人難以置信的規模。

隨著 React Native 的廣泛採用,必須非常謹慎地進行重大變更,而且該流程並不如我們希望的順暢。我們決定跳過 4 月和 5 月的版本,以便核心團隊能夠整合和測試一組新的重大變更。沿途使用了 專門的社群溝通 管道,以確保 2018 年 6 月 (0.56.0) 版本對於那些耐心等待穩定版本的人來說,盡可能輕鬆地採用。

0.56.0 完美嗎?不,就像所有軟體一樣:但我們達到了一個點,即「等待更多穩定性」與「測試帶來成功結果,因此我們可以向前推進」之間的權衡,我們覺得準備好發佈它了。此外,我們知道 一些 問題 問題 未在最終 0.56.0 版本中解決。大多數開發人員升級到 0.56.0 應該沒有問題。對於那些因上述問題而受阻的人,我們希望在我們的討論中看到您,並且我們期待與您合作解決這些問題。

您可以將 0.56.0 視為邁向更穩定框架的基本建構區塊:在所有邊緣情況都消除之前,可能需要一兩週的廣泛採用,但這將帶來更好的 2018 年 7 月 (0.57.0) 版本。

在結束本節時,我們要感謝 總共 818 次提交的 67 位貢獻者 (!),這將有助於讓您的應用程式變得更好 👏。

現在,事不宜遲...

重大變更

Babel 7

您可能知道,轉譯器工具 Babel 讓我們都能使用 JavaScript 的最新和最棒的功能,它即將升級到 v7。由於這個新版本帶來了一些重要的變更,我們認為現在是升級的好時機,讓 Metro 能夠 利用其改進

如果您在升級時遇到問題,請參閱 與其相關的文件章節

現代化 Android 支援

在 Android 上,許多周邊工具都已變更。我們已更新到 Gradle 3.5Android SDK 26Fresco 1.9.0 和 OkHttp 3.10.0,甚至 NDK API 目標也更新到 API 16。這些變更應該不會有問題,並能加快建置速度。更重要的是,它將有助於開發人員遵守下個月生效的 新的 Play 商店要求

與此相關的是,我們要特別感謝 Dulmandakh 提交的許多 PR,以使其成為可能 👏。

在這個方向上還需要採取更多步驟,您可以關注 專門的問題(以及 JSC 的附帶問題)中更新 Android 支援的未來規劃和討論。

全新 Node、Xcode、React 和 Flow – 我的天啊!

Node 8 現在是 React Native 的標準。實際上它已經在測試中,但隨著 Node 6 進入維護模式,我們已經全力以赴。React 也已更新到 16.4,其中包含大量修正。

我們正在停止支援 iOS 8,讓 iOS 9 成為可以鎖定的最舊 iOS 版本。我們不認為這會成為問題,因為任何可以執行 iOS 8 的裝置都可以升級到 iOS 9。此變更讓我們能夠移除為執行 iOS 8 的較舊裝置實作權宜之計的極少使用的程式碼。

持續整合工具鏈已更新 以使用 Xcode 9.4,確保所有 iOS 測試都在 Apple 提供的最新開發人員工具上執行。

我們已升級到 Flow 0.75 以使用 許多開發人員讚賞 的新錯誤格式。我們也為更多組件建立了類型。如果您尚未在專案中強制執行靜態類型,請考慮使用 Flow 在編碼時而不是在執行階段識別問題。

以及許多其他事項...

例如,YellowBox 已 取代 為新的實作,這使除錯變得更好。

如需完整的發佈說明,請參閱此處的完整 變更記錄。並記住密切注意 升級指南,以避免移至此新版本時出現問題。


最後,請注意:從本週開始,React Native 核心團隊將恢復舉行每月會議。我們將確保讓所有人隨時掌握涵蓋的內容,並確保將您的意見回饋放在手邊以供未來會議使用。

祝大家編碼愉快!

LorenzoRyan 和整個 React Native 核心團隊

附註:與往常一樣,我們要提醒大家,React Native 仍處於 0.x 版本控制中,因為仍有許多變更正在進行中 - 因此請記住,升級時,是的,可能仍然會發生崩潰或損壞。在問題中以及提交 PR 時互相幫助 - 並記住遵守 強制執行的 CoC:螢幕的另一端始終是人。

每月發佈週期:發佈 12 月和 1 月 RC

·2 分鐘閱讀時間
Eric Vicenti
Facebook 工程師

在 React Native 推出後不久,我們開始每兩週發佈一次版本,以協助社群採用新功能,同時保持版本穩定以供生產使用。在 Facebook,我們必須每兩週穩定程式碼庫,以便發佈我們的生產 iOS 應用程式,因此我們決定以相同的速度發佈開放原始碼版本。現在,許多 Facebook 應用程式每週發佈一次,尤其是在 Android 上。由於我們每週從 master 發佈版本,因此我們需要使其保持相當穩定。因此,每兩週發佈一次的週期甚至不再讓內部貢獻者受益。

我們經常聽到社群的回饋,即發佈速度難以跟上。像 Expo 這樣的工具不得不跳過每隔一個版本,以便管理版本的快速變更。因此,每兩週發佈一次的版本似乎對社群沒有好處。

現在每月發佈

我們很高興宣佈新的每月發佈週期,以及 2016 年 12 月的版本 v0.40,該版本在上個月一直在穩定,並且已準備好採用。(只需確保 更新 iOS 上原生模組中的標頭)。

雖然可能會因避免週末或處理無法預見的問題而有所延遲幾天,但您現在可以預期給定的版本會在每個月的第一天提供,並在最後一天發佈。

使用當月版本以獲得最佳支援

一月份的候選發布版本已準備就緒,您可以在這裡查看新功能

為了了解即將到來的變更並向 React Native 貢獻者提供更好的回饋,請盡可能使用當月最新的候選發布版本。到每個月底發布版本時,其中包含的變更將已在 Facebook 生產應用程式中發布超過兩週。

您可以使用新的 react-native-git-upgrade 命令輕鬆升級您的應用程式

npm install -g react-native-git-upgrade
react-native-git-upgrade 0.41.0-rc.0

我們希望這種更簡單的方法能讓社群更容易追蹤 React Native 的變更,並儘快採用新版本!

(感謝 Martin Konicek 提出這個計畫,並感謝 Mike Grabowski 使其實現)

歸功於 Git,升級更輕鬆

·4 分鐘閱讀時間
Nicolas Cuillery
Zenika 的 JavaScript 顧問和培訓師

升級到新版本的 React Native 一直很困難。您之前可能看過類似這樣的狀況

這些選項都不是理想的。透過覆寫檔案,我們會遺失本地變更。不覆寫則無法取得最新的更新。

今天,我很榮幸介紹一個新的工具來協助解決這個問題。這個工具稱為 react-native-git-upgrade,它在幕後使用 Git,盡可能自動解決衝突。

使用方式

需求:Git 必須在 PATH 中可用。您的專案不一定要由 Git 管理。

全域安裝 react-native-git-upgrade

$ npm install -g react-native-git-upgrade

或者,使用 Yarn

$ yarn global add react-native-git-upgrade

然後,在您的專案目錄中執行它

$ cd MyProject
$ react-native-git-upgrade 0.38.0

注意:不要執行 'npm install' 來安裝新版本的 react-native。此工具需要能夠比較舊的和新的專案範本才能正確運作。只需在您的應用程式資料夾中執行它,如上所示,同時仍停留在舊版本上。

範例輸出

您也可以在不帶任何引數的情況下執行 react-native-git-upgrade,以升級到最新版本的 React Native。

我們嘗試保留您在 Android 和 iOS 建置檔案中的變更,因此您在升級後無需執行 react-native link

我們已將實作設計得盡可能不具侵入性。它完全基於在暫時目錄中即時建立的本地 Git 儲存庫。它不會干擾您的專案儲存庫(無論您使用哪種 VCS:Git、SVN、Mercurial... 或不使用)。如果發生意外錯誤,您的來源會被還原。

它是如何運作的?

關鍵步驟是產生 Git 補丁。此補丁包含 React Native 範本中,您的應用程式使用的版本與新版本之間的所有變更。

為了取得此補丁,我們需要從 react-native 套件內您 node_modules 目錄中的範本產生一個應用程式(這些範本與 react-native init 命令使用的範本相同)。然後,在從目前版本和新版本中的範本產生原生應用程式之後,Git 就能夠產生適用於您專案的補丁(即包含您的應用程式名稱)。

[...]

diff --git a/ios/MyAwesomeApp/Info.plist b/ios/MyAwesomeApp/Info.plist
index e98ebb0..2fb6a11 100644
--- a/ios/MyAwesomeApp/Info.plist
+++ b/ios/MyAwesomeApp/Info.plist
@@ -45,7 +45,7 @@
<dict>
<key>localhost</key>
<dict>
- <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
+ <key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
[...]

我們現在需要做的就是將此補丁應用於您的原始碼檔案。雖然舊的 react-native upgrade 流程會提示您注意任何細微的差異,但 Git 能夠使用其 3 向合併演算法自動合併大多數變更,最終為我們留下熟悉的衝突分隔符號。

    13B07F951A680F5B00A75B9A /* Release */ = {
isa = XCBuildConfiguration;
buildSettings = {
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
<<<<<<< ours
CODE_SIGN_IDENTITY = "iPhone Developer";
FRAMEWORK_SEARCH_PATHS = (
"$(inherited)",
"$(PROJECT_DIR)/HockeySDK.embeddedframework",
"$(PROJECT_DIR)/HockeySDK-iOS/HockeySDK.embeddedframework",
);
=======
CURRENT_PROJECT_VERSION = 1;
>>>>>>> theirs
HEADER_SEARCH_PATHS = (
"$(inherited)",
/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
"$(SRCROOT)/../node_modules/react-native/React/**",
"$(SRCROOT)/../node_modules/react-native-code-push/ios/CodePush/**",
);

這些衝突通常很容易理解。分隔符號 ours 代表「您的團隊」,而 theirs 可以視為「React Native 團隊」。

為什麼要引入新的全域套件?

React Native 隨附一個全域 CLI(react-native-cli 套件),它將命令委派給嵌入在 node_modules/react-native/local-cli 目錄中的本地 CLI。

如上所述,此流程必須從您目前的 React Native 版本開始。如果我們已將實作嵌入到 local-cli 中,則在使用舊版本的 React Native 時,您將無法享受此功能。例如,如果此新的升級程式碼僅在 0.38.0 中發布,您將無法從 0.29.2 升級到 0.38.0。

基於 Git 的升級是開發人員體驗的一大進步,並且讓所有人都能使用它非常重要。透過使用單獨的套件 react-native-git-upgrade 在全域安裝,您今天就可以使用這個新程式碼,無論您的專案使用哪個版本的 React Native。

另一個原因是 Martin Konicek 最近的 Yeoman wipeout。我們不希望將這些 Yeoman 依賴項放回 react-native 套件中,以便能夠評估舊範本以建立補丁。

試用並提供回饋

總之,我想說,請享受此功能,並隨時建議改進、報告問題,尤其是發送 pull request。每個環境都有些許不同,每個 React Native 專案也不同,我們需要您的回饋才能讓它為所有人良好運作。

謝謝您!

我要感謝很棒的公司 ZenikaM6 Web (已封存),沒有他們,這一切都不可能實現!

推出按鈕、使用 Yarn 更快速安裝及公開藍圖

·3 分鐘閱讀
Héctor Ramos
Héctor Ramos
前 Facebook 開發者倡導者

我們從很多人那裡聽到,React Native 正在進行非常多的工作,很難追蹤正在發生的事情。為了協助溝通正在進行的工作,我們現在發布了 React Native 的路線圖。在高層次上,這項工作可以分為三個優先事項

  • 核心程式庫。為最實用的元件和 API 新增更多功能。
  • 穩定性。改進底層基礎架構,以減少錯誤並提高程式碼品質。
  • 開發者體驗。協助 React Native 開發者更快地行動

如果您對您認為在路線圖上很有價值的特性有任何建議,請查看 Canny,您可以在其中建議新功能並討論現有的提案。

React Native 的新功能

今天發布的 React Native 0.37 版本,引入了一個新的核心元件,可以非常輕鬆地將可觸控的按鈕新增到任何應用程式。我們還引入了對新的 Yarn 套件管理器的支援,這應該可以加快更新應用程式依賴項的整個過程。

Introducing Button

今天,我們推出了一個基本的 <Button /> 元件,它在每個平台上看起來都很棒。這解決了我們收到的最常見的回饋之一:React Native 是唯一沒有開箱即用按鈕的行動開發工具組之一。

Simple Button on Android, iOS

<Button
onPress={onPressMe}
title="Press Me"
accessibilityLabel="Learn more about this Simple Button"
/>

經驗豐富的 React Native 開發人員知道如何製作按鈕:在 iOS 上使用 TouchableOpacity 獲得預設外觀,在 Android 上使用 TouchableNativeFeedback 獲得漣漪效果,然後應用一些樣式。自訂按鈕並非特別難以建置或安裝,但我們的目標是讓 React Native 變得非常容易學習。透過將基本按鈕新增到核心中,新手將能夠在第一天開發出很棒的東西,而不是花時間格式化按鈕並學習 Touchable 的細微差別。

Button 旨在在每個平台上都能良好運作並看起來原生,因此它不會支援自訂按鈕的所有花俏功能。它是一個很好的起點,但並非旨在取代您所有現有的按鈕。若要了解更多資訊,請查看新的 Button 文件,其中包含可運行的範例!

使用 Yarn 加快 react-native init 的速度

您現在可以使用新的 JavaScript 套件管理器 Yarn,來顯著加快 react-native init 的速度。若要查看加速效果,請安裝 yarn 並將您的 react-native-cli 升級到 1.2.0

$ npm install -g react-native-cli

您現在應該在設定新應用程式時看到「Using yarn」

Using yarn

在簡單的本地測試中,在良好的網路環境下react-native init大約 1 分鐘內完成(使用 npm 3.10.8 時約為 3 分鐘)。安裝 yarn 是可選的,但強烈建議。

謝謝您!

我們要感謝所有為此版本做出貢獻的人。完整的發行說明現在已在 GitHub 上提供。憑藉超過二十多個錯誤修復和新功能,React Native 在您的幫助下不斷變得更好。

0.36:無頭 JS、鍵盤 API 及更多

·3 分鐘閱讀
Héctor Ramos
Héctor Ramos
前 Facebook 開發者倡導者

今天我們發布了 React Native 0.36。繼續閱讀以了解有關新功能的更多資訊。

Headless JS

Headless JS 是一種在您的應用程式於背景執行時,在 JavaScript 中執行任務的方法。例如,它可以Used to sync fresh data、處理推播通知或播放音樂。目前僅適用於 Android。

若要開始使用,請在專用檔案中定義您的非同步任務(例如 SomeTaskName.js

module.exports = async taskData => {
// Perform your task here.
};

接下來,在 AppRegistry 上註冊您的任務

AppRegistry.registerHeadlessTask('SomeTaskName', () =>
require('SomeTaskName'),
);

使用 Headless JS 的確需要編寫一些原生 Java 程式碼,以便在需要時啟動服務。請查看我們新的 Headless JS 文件以了解更多資訊!

Keyboard API

使用螢幕鍵盤現在透過 Keyboard 變得更容易。您現在可以監聽原生鍵盤事件並對其做出反應。例如,若要關閉活動鍵盤,只需呼叫 Keyboard.dismiss()

import {Keyboard} from 'react-native';

// Hide that keyboard!
Keyboard.dismiss();

Animated Division

React Native 已經支援透過加法、乘法和模數來組合兩個動畫值。在 0.36 版本中,現在可以透過除法組合兩個動畫值。在某些情況下,動畫值需要反轉另一個動畫值以進行計算。一個範例是反轉縮放 (2x --> 0.5x)

const a = Animated.Value(1);
const b = Animated.divide(1, a);

Animated.spring(a, {
toValue: 2,
}).start();

然後 b 將遵循 a 的彈簧動畫並產生 1 / a 的值。

基本用法如下所示

<Animated.View style={{transform: [{scale: a}]}}>
<Animated.Image style={{transform: [{scale: b}]}} />
<Animated.View>

在此範例中,內部影像完全不會被拉伸,因為父級的縮放被取消。如果您想了解更多資訊,請查看動畫指南

Dark Status Bars

已將新的 barStyle 值新增至 StatusBardark-content。透過此新增功能,您現在可以在 Android 和 iOS 上使用 barStyle。現在的行為如下

  • default:使用平台預設值(iOS 上為淺色,Android 上為深色)。
  • light-content:使用淺色狀態列,帶有黑色文字和圖示。
  • dark-content:使用深色狀態列,帶有白色文字和圖示。

...以及更多

以上僅是 0.36 中變更的部分範例。查看 GitHub 上的發行說明,以查看新功能、錯誤修復和重大變更的完整列表。

您可以透過在終端機中執行以下命令來升級到 0.36

$ npm install --save react-native@0.36
$ react-native upgrade

朝向更佳的文件

·4 分鐘閱讀時間
Kevin Lacker
Facebook 工程經理

擁有出色的開發人員體驗的一部分是擁有出色的文件。建立好的文件需要投入很多心力 - 理想的文件應該簡潔、有幫助、準確、完整且令人愉快。最近,我們一直在努力根據您的回饋來改進文件,並且我們想分享一些我們所做的改進。

Inline Examples

當您學習新的程式庫、新的程式語言或新的框架時,當您第一次編寫一些程式碼、試用它、看看它是否有效...並且它確實有效時,會出現一個美好的時刻。您創造了真實的東西。我們希望將這種發自內心的體驗直接放入我們的文件中。像這樣

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

class ScratchPad extends Component {
render() {
return (
<View style={{flex: 1}}>
<Text style={{fontSize: 30, flex: 1, textAlign: 'center'}}>
Isn't this cool?
</Text>
<Text style={{fontSize: 100, flex: 1, textAlign: 'center'}}>
👍
</Text>
</View>
);
}
}

AppRegistry.registerComponent('ScratchPad', () => ScratchPad);

我們認為這些內嵌範例,使用 react-native-web-player 模組並在 Devin Abbott 的幫助下,是學習 React Native 基礎知識的好方法,並且我們已更新我們的 React Native 開發人員新手教學,盡可能使用這些範例。看看吧 - 如果您曾經好奇想知道如果您修改一小段範例程式碼會發生什麼,這是一個非常好的探索方式。此外,如果您正在建置開發人員工具,並且想在您自己的網站上顯示即時 React Native 範例,react-native-web-player 可以讓這變得簡單明瞭。

核心模擬引擎由 Nicolas Gallagherreact-native-web 專案提供,該專案提供了一種在網頁上顯示 React Native 元件(如 TextView)的方法。如果您有興趣建置共享大部分程式碼庫的行動和網頁體驗,請查看 react-native-web

更好的指南

在 React Native 的某些部分,有多種方法可以做事,我們聽到的回饋是我們可以提供更好的指導。

我們有一個新的 Navigation 指南,比較了不同的方法,並建議您應該使用什麼 - NavigatorNavigatorIOSNavigationExperimental。在中期,我們正在努力改進和整合這些介面。在短期內,我們希望更好的指南能讓您的生活更輕鬆。

我們還有一個新的 觸控處理指南,其中說明了一些製作類似按鈕的介面的基礎知識,以及處理觸控事件的不同方法的簡要摘要。

我們研究的另一個領域是 Flexbox。這包括關於如何使用 Flexbox 處理版面配置以及如何控制元件大小的教學課程。它還包括一個不吸引人但希望有用的 React Native 中控制版面配置的所有屬性列表

Getting Started

當您開始在您的機器上設定 React Native 開發環境時,您確實需要執行一堆安裝和設定操作。很難讓安裝成為真正有趣和令人興奮的體驗,但我們至少可以使其盡可能快速和輕鬆。

我們建置了一個 新的 Getting Started 工作流程,讓您可以預先選擇您的開發作業系統和您的行動作業系統,以提供一個簡潔的地方,其中包含所有設定說明。我們也經歷了安裝過程,以確保一切正常運作,並確保每個決策點都有明確的建議。在我們的無辜同事身上測試後,我們非常確定這是一個改進。

我們還研究了 將 React Native 整合到現有應用程式的指南。許多使用 React Native 的最大型應用程式,例如 Facebook 應用程式本身,實際上是在 React Native 中建置應用程式的一部分,並使用常規開發工具建置另一部分。我們希望本指南能讓更多人更容易以這種方式建置應用程式。

我們需要您的幫助

您的回饋讓我們知道我們應該優先處理什麼。我知道有些人會閱讀這篇部落格文章,並認為「更好的文件?呸。X 的文件仍然是垃圾!」。這很棒 - 我們需要這種能量。給我們回饋的最佳方式取決於回饋的類型。

如果您在文件中發現錯誤,例如不準確的描述或實際無法運作的程式碼,請提交 issue。使用「Documentation」標記它,以便更容易將其轉發給合適的人員。

如果沒有特定的錯誤,但文件中的某些內容從根本上來說令人困惑,則不適合提交 GitHub issue。相反,在 Canny 上發布關於文件中可能需要幫助的區域。這有助於我們在進行更一般的工作(如編寫指南)時確定優先順序。

感謝您閱讀到這裡,並感謝您使用 React Native!

React Native:年度回顧

·2 分鐘閱讀時間
Martin Konicek
Facebook 軟體工程師

自我們開源 React Native 以來,已經一年了。最初只是少數工程師的想法,現在已成為 Facebook 內外產品團隊使用的框架。今天在 F8 上,我們宣布 Microsoft 正在將 React Native 帶到 Windows 生態系統,讓開發人員有可能在 Windows PC、Phone 和 Xbox 上建置 React Native。它還將提供開放原始碼工具和服務,例如 Visual Studio Code 和 CodePush 的 React Native 擴充功能,以協助開發人員在 Windows 平台上建立 React Native 應用程式。此外,Samsung 正在為其混合平台建置 React Native,這將使開發人員能夠為數百萬台 SmartTV 以及行動和穿戴式裝置建置應用程式。我們還發布了 Facebook SDK for React Native,這讓開發人員更容易將 Facebook 社群功能(如登入、分享、應用程式分析和 Graph API)整合到他們的應用程式中。在一年內,React Native 改變了開發人員在每個主要平台上建置的方式。

這是一段史詩般的旅程 — 但我們才剛剛開始。以下回顧 React Native 自我們一年前開源以來如何成長和發展、我們在此過程中面臨的一些挑戰,以及我們對未來的期望。

這是一個摘錄。在 Facebook Code 上閱讀文章的其餘部分。

React Native for Android:我們如何建構第一個跨平台 React Native 應用程式

·一分鐘閱讀
Facebook 軟體工程師

今年稍早,我們推出了 React Native for iOS。React Native 將開發人員在網頁上從 React 習慣使用的功能(宣告式、自我包含的 UI 元件和快速開發週期)帶到行動平台,同時保留原生應用程式的速度、逼真度和感覺。今天,我們很高興發布 React Native for Android。

在 Facebook,我們已經在生產環境中使用 React Native 超過一年了。大約一年前,我們的團隊開始開發 廣告管理員應用程式。我們的目標是建立一個新的應用程式,讓數百萬在 Facebook 上投放廣告的人能夠管理他們的帳戶,並隨時隨地建立新的廣告。它最終不僅成為 Facebook 的第一個完全 React Native 應用程式,也是第一個跨平台應用程式。在這篇文章中,我們想與您分享我們如何建置這個應用程式、React Native 如何使我們能夠更快地行動,以及我們學到的教訓。

這是一個摘錄。在 Facebook Code 上閱讀文章的其餘部分。