React Native環境配置和簡單使用

来源:http://www.cnblogs.com/miaomiaoshen/archive/2016/10/21/5986447.html
-Advertisement-
Play Games

前言 學習本系列內容需要具備一定 HTML 開發基礎，沒有基礎的朋友可以先轉至 "HTML快速入門(一)" 學習 本人接觸 React Native 時間並不是特別長，所以對其中的內容和性質瞭解可能會有所偏差，在學習中如果有錯會及時修改內容，也歡迎萬能的朋友們批評指出，謝謝 文章第一版出自簡書，如果 ...


# 前言

  • 學習本系列內容需要具備一定 HTML 開發基礎，沒有基礎的朋友可以先轉至 HTML快速入門(一) 學習

  • 本人接觸 React Native 時間並不是特別長，所以對其中的內容和性質瞭解可能會有所偏差，在學習中如果有錯會及時修改內容，也歡迎萬能的朋友們批評指出，謝謝

  • 文章第一版出自簡書，如果出現圖片或頁面顯示問題，煩請轉至 簡書 查看 也希望喜歡的朋友可以點贊，謝謝

瞭解 React Native

  • 大家都知道，開發原生 App 的成本很高，但是目前基於原生開發仍然是必需的，隨著 HTML5 的出現，我們可以使用 Web 開發，雖然能夠實現在所有有瀏覽器的平臺上使用並且支持試試熱部署，但是在體驗方面仍無法超越原生 App ，那麼有沒有成本較低，又比較好的解決方案呢？答案就是 Native 相對於 Web，Native 有下麵幾點優點
    • Native 的原生控制項有更好的體驗（目前認為最大的優勢）
    • Native 有更好的手勢識別
    • Native 有更合適的線程模型（Web Worker 也可以解決這部分問題，但是在圖形解碼、文本渲染上仍然沒辦法多線程渲染，這樣就會影響 Web 展示的流暢性）
    • Native 的流暢度目前和原生的保持在同一層次（在優化好的前提下）
  • React Native 是 Facebook 在 F8 大會開源的，在不到一年的時間內成為手機端必不可少的開發模式，像國內Pad版的QQ空間、淘寶等都是使用 React Native 開發的，其中做得比較好的當屬淘寶
  • React Native 設計理念就是即擁有 Native 的用戶體驗，又保留 React 的開發效率
  • 開發者可以靈活使用 HTML 和 CSS佈局，使用 React 語法構建組件，實現 H5, iOS, Android 多端的代碼復用，大概結構如下圖

大概調用結構圖

React Native 開發註意事項

  • 目前React Native 在 iOS 上僅僅支持 iOS7 及以上操作系統，Android 僅支持 Android4.1 及以上操作系統，github下載地址 官方文檔
  • React Native 的版本更新速度特別快，如果沒有比較好的 JavaScript 基礎，下列的建議還是必要參考的
    • 對於部分複雜的應用，考慮原生 + React Native 混合開發方式

React Native 開發環境配置

  • 在安裝 React Native 之前我們需要先配置一下所需的開發環境，具體詳細見下麵

  • 環境要求
    • 安裝 Homebrew（ Homebrew 是 OSX 的套件管理器，我們可以通過它獲取並安裝很多需要的組件
      • 安裝方式：打開 Mac 的終端 → 粘貼命令 ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
      • 驗證是否安裝成功：打開 Mac終端 → 粘貼命令 brew -v，出現類似下列提示表示安裝成功

    Homebrew安裝成功

  • 安裝 WatchMan（該插件用於監控bug文件和文件變化，並且可以出髮指定的操作）
    • 安裝方式：打開Mac的終端 → 粘貼命令 brew install watchman
    • 驗證是否安裝成功：待看到類似以下的提示表示安裝成功

    WatchMan安裝成功

  • 安裝 Flow（flow 是一個 JavaScript 的靜態類型檢查器，方便找出代碼中可能存在的類型錯誤）安不安裝看個人，推薦安裝
    • 安裝方式：打開Mac的終端 → 粘貼命令 brew install flow
    • 註意事項：（如果提示 command not found,需要在命令前加上sudo獲得最高許可權） - 驗證是否安裝成功：待看到類似以下的提示表示安裝成功

    Flow安裝成功

  • 安裝 npm 和 Node.js
    • Node.js 最好安裝4.0及更高版本，Node 內包含了 npm，所以直接下載Node.js安裝
    • 下載方式：選擇各自系統版本下載

    node安裝

正式安裝 React Native

  • 安裝 React Native
    • 安裝方式：打開Mac的終端 → 粘貼命令 npm install -g react-native-cli
    • 註意事項：（如果提示command not found或者出現一大堆error提示的,在確保已經安裝npm的情況下需要在命令前加上 sudo 獲得最高許可權）

    錯誤

  • 驗證是否安裝成功：

    React Native安裝成功

安裝 iOS 和 Android 開發環境

  • iOS需求：Xcode7及以上更高版本

  • Android 需求
    • 下載安裝最新版Android studio
      • 方式一：可以安裝 Android studio 省略下麵的步驟（推薦）
      • 建議提前修改下 hosts，要不稍後下載sdk特別慢
        • 命令行：sudo sudo vi /etc/hosts/ → 添加203.208.46.146 dl.google.com
          45 203.208.46.146 dl-ssl.google.com → :wq 保存退出
    • 方式二：(比較麻煩，需要配置)
      • 安裝 Android SDK
        • 安裝方式：brew install android-sdk
        • 驗證是否安裝成功：

    Android SDK安裝成功

  • 定義 Android_HOME 環境變數
    • 確保 Android_HOME 環境變數指向已經安裝的 Android SDK 目錄（路徑~/.bashrc,~/.bash_profile或者終端所用的其它配置文件中增加下麵的內容）


        # 如果你是通過Homebrew安裝SDK的，則加入下列路徑
    export ANDROID_HOME=/usr/local/opt/android-sdk
    # 否則加入下列路徑
    export ANDROID_HOME=~/Library/Android/sdk
  • 設置SDK
    • 打開Android SDK Manager（Mac用戶在終端下輸入 android）→ 選中以下項目


        Android SDK Build-tools version 23.0.1（這個必須版本嚴格匹配23.0.1）        
    Android 6.0 (API 23)
    Local Maven repository for Support Libraries(之前叫做Android Support Repository)

  • 具體設置看下麵的動態圖（這邊我就只安裝常用的）
    設置SDK.gif

  • 安裝 Genymotion（Genymotion 是第三方模擬器，比起Google官方的模擬器更易設置且性能更好。但是，它只針對個人用戶免費）
    • Genymotion下載安裝
    • 打開Genymotion，如果沒有安裝VirtuaIBox，會提示安裝
      安裝VirtualBox
    • 創建一個模擬器並啟動
    • 按下Mac快捷鍵 cmd + M 可以打開開發者菜單（在安裝並啟動了React Native應用後可用）

測試 React Native 等各項功能是否正常

  • 生成新工程

    • 打開 Mac 的 終端 → 粘貼命令 react-native init 項目名稱(這邊我們就用react-native init TestRN)，成功後會出現以下提示
      新建工程1
      新建工程2

    • 註意事項：這邊需要註意的是，速度快慢和網路情況有關（React-Native命令行需要從npm官方源下載代碼會遇上麻煩，可以將npm倉庫源替換成國內鏡像）
      • 方式：打開 Mac 的終端 → 粘貼下麵命令
        • npm config set registry https://registry.npm.taobao.org
        • npm config set disturl https://npm.taobao.org/dist

工程目錄結構分析

  • 現在我們的新工程(TestRN)已經配置好了，那麼生成的文件都在哪裡呢？不知道上面的圖中有沒有發現，其實已經提示我們路徑就是如下圖標記出來的位置
    工程路徑

  • 打開我們的TestRN，我們可以看到預設生成了 iOS 和 Android 兩個平臺的原生項目

  • 除了這些之外，還有 index.ios.js 和 index.android.js （這就是入口），node_modules文件夾是為Node.js存放和管理npm包資源，也包含React Native框架文件
    目錄結構

在 iOS 上運行第一個 React Native 應用

  • 使用 Xcode 打開我們 iOS 文件夾中的工程

  • 運行工程文件（不管 iOS 還是 Android，在開發階段都需要在系統上啟動一個HTTP服務 —— Debug Server，預設運行在8081埠，APP通過它載入js）

  • 註意事項：這個視窗不要關閉
    本地伺服器

  • 運行效果

    iOS運行效果.gif

在 Android 上運行第一個 React Native 應用

  • 方式一：如果是安裝了 Android studio 的朋友可以直接使用它運行

  • 方式二：命令行打開項目主目錄（我這邊路徑為/Users/yeshaojian/TestRN）:cd /Users/yeshaojian/TestRN → 命令行：react-native run-android → 第一次運行的話會下載一些必要的 SDK，時間比較久，所以只能耐心等待

  • 註意事項：這個視窗不要關閉
    本地伺服器

  • 運行效果

andorid運行效果.gif

如何查看和修改代碼

  • 我習慣使用 WebStrom 這個 HTML 開發神器，這邊就以這款神器為例

  • 目錄結構
    目錄結構

  • 這邊就以 iOS 為例，我們點擊index.ios.js就可以查看代碼了，接下來看看大概部分

    引用部分

    入口部分

    樣式部分

    註冊部分

  • 修改代碼（我們將 Welcome to React Native! 修改成 hello Word！）

    export default class TestRN extends Component {
        render() {
            return (
                <View style={styles.container}>
                    <Text style={styles.welcome}>
                        hello Word！
                    </Text>
                    <Text style={styles.instructions}>
                    To get started, edit index.ios.js
                    </Text>
                    <Text style={styles.instructions}>
                    Press Cmd+R to reload,{'\n'}
                    Cmd+D or shake for dev menu
                    </Text>
                </View>
            );
        }
    }

  • 在模擬器上使用 cmd + R 就可以刷新了

    iOS修改效果.gif

管理 React Native 版本

  • 因為 React Native 經常更新，我們開發中也經常需要控制它的版本庫，來做到適配各種條件下的開發，那麼如何查看和控製版本，在網上搜了一些資料整理後感覺下麵的方式還是比較方便的分享給大家

  • 查看本地的 React Native 版本
    • 命令行：react-native --version
      查看本地的 React Native 版本
  • 更新本地的 React Native 的版本
    • 命令行：npm update -g react-native-cli
  • 查詢 react-native 的 npm 包最新版本
    • 方式一：npm包地址
    • 方式二：npm info react-native
      查詢react-native的npm包最新版本
    • 方式三：項目中查看當前 npm 包版本
      項目中查看當前 npm 包版本
  • 升級或降級 npm 包的版本
  • 更新項目 templates 文件（新的npm包會包含更新運行在 react-native init 命令生成的一些動態文件，比如 init 創建項目的時候會生成 iOS 和 Android 的子項目，我們可以通過下麵的命令獲取最新代碼）
    • 命令行：react-native upgrade

WebStom設置React Native代碼提示

從 gitHub 上下載xml插件：https://github.com/virtoolswebplayer/ReactNative-LiveTemplate

  • 安裝
    • 將ReactNative.xml複製到 ~/Library/Preferences/WebStorm10/templates(就是webStorm的安裝的目錄) → 如果沒有 templates文件夾，我們可以自己新建一個，然後重啟 WebStrom

React Native代碼提示.gif


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Android 手機衛士16--手機殺毒
    1.指定動畫一直旋轉 android:repeatCount 重覆的次數，預設為0，必須是int，可以為-1表示不停止 1 public class AnitVirusActivity extends Activity { 2 protected static final int SCANING = ...
  • Android5.0開發範例大全 讀書筆記（四）
    （三）通信和聯網 3.1顯示Web信息 1.WebView通過loadUrl()方法直接訪問網頁時，點擊跳轉鏈接會打開系統預設的瀏覽器，若要攔截WebView事件，可為其添加WebViewClient 2.WebView預設不支持JavaScript，要通過setJavaScriptEnabled( ...
  • 彈性動畫例子
    iOS進階之編寫彈性動畫條紋動畫（樂譜）圓圈波紋動畫彈性圓圈動畫數字轉變動畫談談iOS中粘性動畫以及果凍效果的實現一個彈性側滑菜單另一個數字轉變動畫 ...
  • Android5.0開發範例大全 讀書筆記（三）
    （二）用戶交互 2.14轉發觸摸事件 1.TouchDelegate很適合簡單的觸摸轉發，它指定任意的矩形區域來向小視圖轉發觸摸事件，其缺點是每個被轉發的事件都會轉發到代理視圖的中間位置 2.自定義觸摸轉發 在onTouch中改變event事件信息 2.15阻止觸摸竊賊 1. 調用requestDi ...
  • CAShaperLayer的應用
    關於CAShapeLayer的一些實用案例和技巧實現遮罩音量大小動態改變的控制項圓形進度條iOS 利用CAShapeLayer的FillRule屬性生成一個空心遮罩的layerfillrule屬性。和電腦圖形學有關為視圖添加絲滑的水波紋利用餘弦函數 ...
  • Android 手機衛士15--程式鎖
    1.基本思路 ①.創建已加鎖應用的資料庫(欄位:_id,packagename),如果應用已加鎖,將加鎖應用的包名維護到資料庫中 ②.已加鎖+未加鎖 == 手機中所有應用(AppInfoProvider) 2.已加鎖和未加鎖的數據適配器 1 class MyAdapter extends BaseA ...
  • Mac版 Android Studio快捷鍵大全
    ⌥—> option|alt ⇧—>shift ⌃—>control ⌘—>command ⎋—>esc ↑↓←→ Code ⌥—> option|alt ⇧—>shift ⌃—>control ⌘—>command ⎋—>esc ↑↓←→ Code alt+F7：Find usage alt+co ...
  • Android 手機衛士14--Widget視窗小部件AppWidgetProvider
    1.AndroidManifest.xml根據窗體小部件廣播接受者關鍵字android.appwidget.action.APPWIDGET_UPDATE 搜索android:resource="@xml/process_widget_provider" 2.找到xml文件夾下process_wid ...
一周排行
    -Advertisement-
    Play Games
  • C# + WPF 音頻播放器 界面優雅，體驗良好
    前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器，其界面簡潔大方，操作體驗流暢。該播放器支持多種音頻格式（如 MP4、WMA、OGG、FLAC 等），並具備標記、實時歌詞顯示等功能。 另外，還支持換膚及多語言（中英文）切換。核心音頻處理採用 FFmpeg 組件，獲得了廣泛認可，目前 Git ...
  • OAuth2.0授權-gitee授權碼模式
    OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統，完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面，查看已創建應用的Client ID和Clien ...
  • FastReport.OpenSource .Net下開源免費報表列印組件
    解決了這個問題：《winForm下，fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自：https://www.fcnsoft.com/Home/Sho ...
  • 如何在 ASP.NET Core Web API 方法執行前後 “偷偷“ 作一些 “壞“ 事？初識 ActionFilterAttribute
    國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面，接收裸 Win 32 的 WM_Pointer 消息，從消息裡面獲取觸摸點信息，使用觸摸點 ...
  • 在 ASP.NET Core Web API 中使用異常篩選器捕獲和統一處理異常
    前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能，還集成了高性能的輕量級 POS 解決方案，確保頁面載入速度極快，提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • AbpHelper CLI積累與實戰分享
    ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI： ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的，因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 記一次HttpClient使用問題分析
    問題 問題是這樣的：第三方的webapi，需要先調用登陸介面獲取Cookie，訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面，返回的Headers中沒有找到Cookie信息。 分析 首先，使用Postman測試該登陸介面，正常返回Cookie信息，說明是HttpCli ...
  • .NET周刊【9月第3期 2024-09-15】
    國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低，主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上，.NET曾因微軟的閉源策略發展受限，儘管後來推出了跨平臺的.NET ...
  • 我的網站集成ElasticSearch初體驗
    在WPF開發應用中，動畫不僅可以引起用戶的註意與興趣，而且還使軟體更加便於使用。前面幾篇文章講解了畫筆（Brush），形狀（Shape），幾何圖形（Geometry），變換（Transform）等相關內容，今天繼續講解動畫相關內容和知識點，僅供學習分享使用，如有不足之處，還請指正。 ...
  • 第23篇 委托的概述
    什麼是委托？ 委托可以說是把一個方法代入另一個方法執行，相當於指向函數的指針；事件就相當於保存委托的數組； 1.實例化委托的方式： 方式1：通過new創建實例： public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...
所有分類