1. 程式人生 > >分享 50 個完整的 React Native 專案

分享 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