React Native學習資源彙總

時間  2020-08-02
標籤 react native 學習 資源 彙總 欄目 React 简体版
原文   原文鏈接

目前主流的移動跨平臺技術方案大致能夠分爲三類，一類是使用原生內置瀏覽器加載HTML5的Hybrid技術方案，採用此種方案的主要有Cordova、Ionic和微信小程序；另外一類是使用JavaScript語言進行開發，而後使用原生組件進行渲染，採用此方案的主要有React Native、Weex和快應用；最後一類是使用自帶的渲染引擎和自帶的原生組件來實現跨平臺，採用此種方案的主要是Flutter。css

對於其餘的瀏覽器方案，基本能夠拋棄了，如今咱們討論移動跨平臺開發主要說的是React Native和Flutter，React Native和Flutter在應用開發上，效率差很少，不過要強調性能的話，仍是Flutter爲最佳選擇。因爲如今你們都開始使用Flutter來開發應用，致使React Native的學習資料愈來愈少。
在這裏插入圖片描述
做爲跨平臺的忠實粉絲，我在去年的下半年對《React Native移動開發實戰》進行了升級，出版了《React Native移動開發實戰》的第二版，書中對以前的知識作了從新的梳理，使之更加貼近項目實戰，有須要的能夠去京東，天貓支持下。html

做爲目前比較流行的移動跨平臺開發方案之一，React Native仍然還有不少的粉絲，特別是熟悉前端React開發的技術人員，國內大廠都在使用哪些移動跨平臺框架羅列了目前在使用跨平臺技術進行應用開發的一些廠商。前端

React Native 學習資源精選

目錄

<!-- TOC -->node

<!-- /TOC -->git

資源網站

ES6&ES7

React.js

React.js相關教程

React Native

教程

佈局相關

開發調試

發佈部署

系列教程

項目實踐&教程

開源APP

它山之石能夠攻玉。

框架

React-Native開發的庫/ SDK類型。
  • NativeBase：一款融合了ES6用於在React Native上建立建立高質量的Android&iOS APP的框架。
  • tcomb-form-native：強大的表單處理控件，支持 JSON 模式，可插拔的外觀和感受。
  • BlankApp UI：React Native的高度可定製和主題組件。
  • Shoutem UI：一個完整React Native的UI工具包。
  • React Native Elements：React Native UI元素和組件的集合。
  • Panza：收集無狀態，功能性，跨平臺的ui組件，用於React Native。

庫

  • react-native-launch-image：用在React Native上手動關閉iOS啓動界面（Launch Screen）的工具。詳細說明
  • RNShareSDK：一款基於原平生臺ShareSDK的ReactNative插件,方便RN開發者集成各大社交平臺的分享和受權功能。
  • react-native-social-kit：對第三方社交帳號SDK的封裝，使開發者能在React Native App裏使用受權、分享等功能。
  • react-native-agora: 基於聲網音視頻SDK封裝的React Native模塊，方便RN開發者能夠輕鬆集成WebRTC功能，實現電話會議，視頻會議，直播等功能。

組件

UI

Navigation

ViewPager

ListView&ScrollView

Text&Rich Content

彈框

  • react-native-easy-toast：一款用於React Native上消息提示彈框組件，使用方便，支持定義Toast，支持iOS,Android。
  • react-native-modal：模態框，做者已經將該組件添加到React Native，因此開發者能夠直接使用Modal;
  • react-native-popover：一款相似Android popupwindow的彈出框組件。

音視頻相機

圖形動畫

數據存儲

Web相關

系統相關

Material Design

工具包

TabLayout

工具

IDE

  • Nuclide：Nuclide 是 Facebook 推出的一套基於 Atom 的開發工具集。用於開發基於 Hack 的 Web 應用。提供自動完成和 JavaScript 類型檢查，內建 React 開發支持，並支持 Facebook 最新的 React Native 庫，支持 Facebook 的 Flow JavaScript 類型檢查器。
  • WebStorm：JetBrains公司出品的用於前端開發的IDE，WebStorm有着JetBrains公司IDE的優良血統，是前端工程師的一個開發神器。另外，AndroidStudio也是基於JetBrains的IDE，這對於習慣了AndroidStudio的開發者來講，WebStorm無疑是一個最佳的選擇。

其餘

  • CodePush：CodePush 是微軟提供的一套用於熱更新 React Native 和 Cordova 應用的服務。
  • Redux：用於JavaScript apps上的一款可預見的狀態管理框架。
  • MobX：與 Redux 相比，更輕便、自由的狀態管理框架。
  • redux-react-native-i18n 具備複數形式的i18n解決方案支持Redux上的React Native應用程序
  • React Sight 用於React的可視化工具，支持Fiber，Router（v4）和Redux Chrome Plug github
  • React Developer Tools 一個擴展程序，容許檢查Chrome和Firefox開發人員工具中的React組件層次結構。 Chrome Plug github
  • react-native-rename : Rename react-native app with just one command

視頻

新聞&討論

一次學習，隨處可寫

一塊兒踩坑

<resources>
    <string name="app_name">Your_app_name_to_display</string>
</resources>
android{
    applicationVariants.all { variant ->
        variant.outputs.each { output ->
            def outputFile = output.outputFile
            if (outputFile != null && outputFile.name.endsWith('.apk')) {
                File outputDirectory = new File(outputFile.parent);
                def fileName
         // 你的apk打包名稱
                if (variant.buildType.name == "release") {
                    fileName =  "app_v${defaultConfig.versionName}_${releaseTime()}_${variant.productFlavors[0].name}.apk"
                } else {
                    fileName = "app_v${defaultConfig.versionName}_${packageTime()}_debug.apk"
                }
                output.outputFile = new File(outputDirectory, fileName)
            }
        }
    }

}
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程