深入淺出React Native 2: 我的第一個應用

来源:http://www.cnblogs.com/philipding/archive/2016/03/27/5324463.html
-Advertisement-
Play Games

這是深入淺出React Native教程的第二篇文章。 1. 環境配置 React Native環境配好之後,就可以開始創建我們的第一個App啦。 打開控制台,輸入 上述命令的作用是在當前文件夾下創建一個名字叫AwesomeProject的項目模板。在運行該命令之前,可以先用cd命令到自己想創建re ...


這是深入淺出React Native教程的第二篇文章。

1. 環境配置


React Native環境配好之後,就可以開始創建我們的第一個App啦。

打開控制台,輸入

react-native init AwesomeProject

上述命令的作用是在當前文件夾下創建一個名字叫AwesomeProject的項目模板。在運行該命令之前,可以先用cd命令到自己想創建react native的文件夾下。

當然,比較坑的是,執行這個命令會用耗費很長很長的時間,有時候還會出現各種各樣的錯誤,例如,沒有許可權。所以在我們這次教程中,直接拿一個初始的項目來修改使用。地址如下:

github: https://github.com/CellChen/react-native-init

下載下來之後,找到tar文件夾,裡面就是我們需要用到的項目了。

項目文件如下所示:(該教程主要是iOS開發,所以先忽略andorid相關的,其實android與iOS的目錄類似。)

可以看出項目主要由index.ios.js以及ios項目組成。

打開控制台,確保當前控制台所指向的目錄是AwesomeProject,輸入

npm start

 

該命令主要是啟動開發使用的本地伺服器。

當伺服器啟動後,就可以用xcode打開ios項目,編譯、運行,就可以看到這個最最最最最初始的項目啦~~

我們可以嘗試修改下index.ios.js文件看看效果~

用文件編輯器(個人還是比較推薦使用sublime,好看、好用、插件多~)打開index.ios.js,可以看到如下的代碼:

將第20行代碼修改成 "這個是我第一個React Native的應用"

切換回iphone模擬器,CMD+R刷新,可以看到模擬器上的標題改成我們最新修改的文字了~(如果CMD+R刷新後看到的還是以前的文字的話,可以嘗試將伺服器停掉再重新打開~)

好啦,以上就是我們的第一個React Native應用了,如果對項目里的代碼不理解,也沒關係,後續會慢慢解釋的~


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

-Advertisement-
Play Games
更多相關文章
  • 對於H5來說,canvas可以說是它最有特色的一個地方了,有了它之後我們可以隨意的在網頁上畫各種各樣的圖形,做一些小游戲啊什麼的。canvas這個標簽的用法,在網上也有特別多的教程了,這裡就不作介紹了。今天我們就用canvas來做一個小小的時鐘。完整的代碼在這裡https://github.com/ ...
  • × 目錄 [1]首行縮進 [2]水平對齊 [3]字間隔[4]字母間隔[5]文本轉換 [6]文本修飾 前面的話 CSS文本樣式是相對於內容進行的樣式修飾。由於在層疊關係中,內容要高於背景。所以文本樣式相對而言更加重要。有些人對文本和字體樣式之間的不同不太瞭解,簡單地講,文本是內容,而字體則用於顯示這個 ...
  • 將瀏覽器預設的下拉框樣式清除,然後應用上自己的,再附一張向右對齊小箭頭的圖片即可。 IE8/9並不支持 appearance:none CSS屬性,想要支持的話可能需要非常特殊的方法,參考SF: 我們需要為其添加一個父容器,容器是用來覆蓋小箭頭的,然後為select添加一個向右的小偏移或者寬度大於父 ...
  • 首先我要解釋一下標題的意義,日期的簡潔格式展示,之所以簡介,是因為讓人一目瞭然,不需要思考是什麼時候。 在詳細一點就是我們在微信朋友圈中 所看到的時間格式。 例如:剛剛 -幾分鐘前-幾小時前等等。 今天這裡帶來的是一個簡單的類別。 方便實用。 以及簡單的實際應用。 先看看一看類別是什麼樣子的 .h ...
  • 新手瞭解 有不對的地方指點下 首先, 瞭解下什麼是GIT,GIT是一款開元的分散式版本控制工具, 在世界上的所有分散式版本控制工具中,GIT是最簡單,最流行,同時也是最常用的 相比於其他版本的控制工具而言,GIT也有著自己的特點 舉個例子,GIT與集中式版本控制中的SVN相比來說,區別主要在於以下幾 ...
  • 在現在這個離不開手機的時代,對於手機APP的開發也是一個很大的市場,所以自己也想去探一探手機APP開發,在我們進行Android開發的第一步就是搭建環境,具體怎麼搭建我就不說,這裡記錄一下在搭建環境的過程中遇到的一些問題,來幫助遇到相同問題的童鞋。 1、點擊安卓模擬器就會出現一個錯誤消息:Locat ...
  • 一、概述 Xfermode全名transfer-mode,其作用是實現兩張圖疊加時的混合效果。 網上流傳的關於Xfermode最出名的圖來源於AndroidSDK的samples中,名叫Xfermodes.java,效果如下: [轉載請保留本文地址:http://www.cnblogs.com/go ...
  • 工具類 Activity ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...