分享 50 個完整的 React Native 專案
一、前言
先更正下,不然又有人要出來打假了。標題說是 50 個,但其實目前只有 43 個。那為啥標題非說 50 個?!可是如果叫《43 個完整.....》好像不太好聽吧?嘿嘿~ 不過我是每個月 15 號左右去更新的,所以下個月肯定就超過 50 個了。
http://www.jianshu.com/p/470606826b12
順便說下,最近 。不過暫時還沒想好放什麼內容,就先用 Github Pages 搭了一個簡單的網站,連結到了我整理的 React Native 優秀開源專案大全上。
經常在微信群裡看到有一些正在學習 RN 的朋友在問,有沒有什麼比較適合入門的完整專案來參考學習下,今天就把我自己收藏的一些專案推薦給大家。各種各樣的算是比較全了,其中也有一些是上線了的專案。下面直奔主題↓↓↓
二、專案列表
序號 | 名稱/地址 | 簡介 | 預覽圖 |
---|---|---|---|
1 | 這是一個用來檢視GitHub最受歡迎與最熱專案的App,它基於React Native支援Android和iOS雙平臺。 |
|
|
6 | 30天學React Native的Demo App,結合作者原始碼,學React Native效果槓桿滴! |
|
|
10 | 使用React Native模仿ONE的App,完成度挺高 |
|
|
16 | im.js | 一個基於 react-native + mobx + socket.io + node 的仿微信 JS-Wechat |
|
17 | House | 用react native寫的一個html5專案,由於時間關係,完成的比較粗糙,請多多指教,大神勿噴^_^ |
|
18 | A social networking application written by React Native |
|
|
19 | 適合入門學習的demo,適配android ios, 有網頁、圖片、音樂、地圖等功能 |
|
|
20 | RN寫的餓了麼,還原度相當高,實現了各類動效,高度推薦 |
|
|
21 | 一個使用React Native製作的個人部落格客戶端,已上架App Store |
此處無圖 |
|
22 | React-Native寫的V2EX社群App |
|
|
25 | YCool | 小說閱讀APP |
|
26 | (VctrySam)仿 SnapChat,國外一哥們VctrySam,用RN仿寫了國外幾個比較流行的App,後面幾個都是他寫的 |
|
|
27 | (VctrySam)仿 Tinder,國外的探探 |
|
|
28 | (VctrySam)仿 Airbnb |
|
|
29 | (VctrySam)仿 whatsapp |
|
|
30 | (VctrySam)仿 Over18s。別問我,我也不知道這是什麼軟體 | 此處無圖 | |
31 | (VctrySam)仿 TicTacToe | 此處無圖 | |
32 | game1 | (VctrySam)仿 game1 | 此處無圖 |
33 | (VctrySam)仿 hackathon1 |
|
|
34 | (VctrySam)待辦事項清單App | 此處無圖 | |
35 | (VctrySam)一個遊戲 |
|
|
36 | (VctrySam)仿 Youtube |
|
|
37 | (VctrySam)仿 Twitter |
|
|
38 | (VctrySam)仿 FCBarca |
|
|
39 | (VctrySam)仿 Slacker |
|
|
40 | React Conf 2017 Companion App |
|
|
41 | 用到了 RN+Redux+Redux Storage+Firebase 的一個開源專案 |
|
|
42 | 一個非常適合入門學習的react-native專案,有借鑑自其他種子專案的組織方式,程式碼清晰、結構合理。 |
|
相關推薦
分享 50 個完整的 React Native 專案
一、前言 先更正下,不然又有人要出來打假了。標題說是 50 個,但其實目前只有 43 個。那為啥標題非說 50 個?!可是如果叫《43 個完整.....》好像不太好聽吧?嘿嘿~ 不過我是每個月 15 號左右去更新的,所以下個月肯定就超過 50 個了。 http://www.jianshu.com/p/
React Native 專案整合 CodePush 全然指南
作者 | 錢凱 杏仁移動開發project師,前嵌入式project師。關注大前端技術新潮流。 本文使用的環境: [email protected] React [email protected]
解決升級到Xcode10,react native專案執行報錯問題
今天剛升級到Xcode10,就遇到兩個報錯問題 錯誤一:Xcode 10: Build input file double-conversion cannot be found error: Build input file cannot be found: '../node_modules/react-
react-native 專案配置ts執行環境
#全域性安裝 create-react-native-app yarn global add create-react-native-app #建立專案 create-react-native-app my-app #安裝ts依賴 yarn add typesc
expo搭建react-native專案
react-native官網中推薦開發使用expo去開發和真機啟動專案。 在專案中可以使用expo的腳手架expo-cli去搭建,也可以使用create-react-native-app 腳手架去搭建。部落格中使用的後者。前者可以參考官網 Get Started 全域性安裝腳手架
初始化一個react-native專案
npm config set registry https://registry.npm.taobao.org --global npm config set disturl https://npm.taobao.org/dist --global npm install
第一次react-native專案實踐要點總結
今天完成了我的第一個react-native專案的封包,當然其間各種環境各種坑,同時,成就感也是滿滿的。這裡總結一下使用react-native的一些入門級重要點(不涉及環境)。注意:閱讀需要語法基礎: ES6 、react 、JSX 我對react-native的理解簡而言之就是 :react
WebStorm執行React Native專案
WebStorm是一款前端開發工具,也可以用於React Native專案 下載安裝WebStorm 下載破解補丁 開啟網址(IntelliJ IDEA 註冊碼),下載補丁 然後將補丁複製
4.React Native專案開發如何配置除錯
本篇主要專案開發中如何除錯及除錯配置; RN除錯感覺比較痛苦,沒有Android開發或者IOS開發那麼靈活,說說如何配置; 1.在你執行起來的Android專案介面按住⌘-M會彈出如下列表 2.選擇Debug JS Remotely選項會自動開啟瀏覽器http://
Facebook 宣佈將重構 React Native 專案 « 關於網路那些事...
React Native 官方在6/14發布一則訊息 為了使React Native更輕量化並更好地適應現有的應用程式,官方正式宣佈,正式啟動重構專案 Reac
如何自動化測試 React Native 專案 (下篇)
接著上篇的內容, 這篇文章會詳細的介紹在 Glow 我們如何寫單元測試, 以及在 React Native 中各個模組單元測試的詳細實現方式。 單元測試工具 - Jest & Enzyme Jest - Facebook Jest 是 Facebook 開源的
如何自動化測試 React Native 專案 (上篇)
React Native (RN) 是 Facebook 開源的跨平臺應用開發框架,由於 RN 提供的高效直觀的跨平臺開發模式和不錯的效能,我們在開發 Glow 的中文 App - 共樂孕的時候選擇了以 RN 為主要框架進行開發。 隨著開發模式的逐漸成熟,對RN專案的自動化測試
如何執行github上react native專案
寫在前面 之前就發現百度上,關於下載github上react native專案(下文稱RN)執行的方法不全,今天抽空整理下,給大家一點靈感。 一、下載RN專案 以react-native-nba-app作為事例 二、執行RN專案 執行終
執行react-native專案遇到的坑
最近接手了一個react-native專案,用xcode執行的時候,各種坑,各種報錯,現在抽時間整理一下 1.找不到標頭檔案 RCTJPushModule.h 一上來就報這個錯,翻閱一些資料找到解決辦法 開啟終端,cd到專案資料夾,輸入 npm install jpu
初始化react-native專案執行採坑
第一坑.react和react-native版本配合有很高的要求 init專案啟動後報如下錯誤: error: bundling failed: "Unable to resolve module `AccessibilityInfo` from `/Users/appl
關於React Native專案在android上UI效能除錯實踐
我們盡最大的努力來爭取使UI元件的效能如絲般順滑,但有的時候這根本不可能做到。要知道,Android有超過一萬種不同型號的手機,而在框架底層進行軟體渲染的時候是統一處理的,這意味著你沒辦法像iOS那樣自
react-native專案連線夜神模擬器詳細步驟-----------小白的天堂
RN專案連線夜神模擬器: 1. 開啟夜神模擬器,電腦進入cmd 連線夜神模擬器 adb connect 127.0.0.1:8081 下邊 會直接顯示結果,當出現connected sucessful時證明連線成功 2. 進入RN專
利用CodePush對react-native專案熱更新(以android為例)
CodePush是提供給React native 或 Cordova開發的一箇中央倉庫,開發者可以將js、image等程式碼資源上傳上去,客戶端啟動的時候根據版本拉去CodePush上的程式碼進行覆蓋來實現客戶端的熱更新。 1,安裝CodePush npm install
react-native專案經驗
修改埠號:node_modules\react-native\local-cli\server\server.js 生成apk:react-native run-android --variant=release 編譯專案:react-native start 宣告樣式:var sty
React Native專案修改包名
打release包時,要修改包名 1,修改defaultConfig, applicationId:應用的唯一標識() versionCode :釋出到平臺後,版本更新使用(版本迭代時注意) versionName:顯示應用的版本(作用不大) 2,修改MainActi