天天看點

React-Native:簡單入門教程_環境搭建

RN(React-Native),是Facebook于2015年4月開源的跨平台移動應用開發架構,是Facebook早先開源的UI架構 React 在原生移動應用平台的衍生産物,目前支援iOS和安卓兩大平台。RN使用Javascript語言,類似于HTML的JSX,以及CSS來開發移動應用,是以熟悉Web前端開發的技術人員隻需很少的學習就可以進入移動應用開發領域;但是對于我這種前端不是很6的人來說,就得花時間好好學習一下了。

一、rn的優點

跨平台

提高代碼複用性

調試友善

支援熱更新

二、rn的缺點

版本不穩定,知道目前為止都沒有初版

控件在Android和iOS之間還是存在一定大的差異,不夠完善

自身更新麻煩

。。。。。。

三、介紹幾個學習的官方網站

官網:<https://facebook.github.io/react-native/>;

中文官網:<http://reactnative.cn/>;

Github:<https://github.com/facebook/react-native/>;

四、環境搭建

因為rn沒有出過官方的版本,這裡我們所做的入門練習都是基于React Native0.47版本去學習的哦!

1. nodeJS

nodeJs是開發必不可少的伺服器腳本語言,這裡使用的是12.14.0版本,大家可以去官網(NodeJS官網)下載下傳相應版本即可。

注 :開發rn,對應nodejs版本要求應該有一定限制, 版本應大于等于 12.0,一般下載下傳最新的穩定版就可以。

2. python

python的話,一般下載下傳2.x版本就可以,因為目前好像并不支援3.x。官網(python官網連結).

3. jdk

jdk的話,一般需要的是1.8,官網(JDK8)下載下傳就行,但是現在都需要新增賬號才可以下載下傳哦。

4. android studio

android studio一般要求是大于2.x版本即可,這裡我們使用的是2.1版本。

5. yarn

yarn版本沒有特别要求,本人用的是1.15.2版本。

6. npm

npm用的是6.13.4版本。

注意: 1、不要使用 cnpm!cnpm 安裝的子產品路徑比較奇怪,packager 不能正常識别! 2、具體安裝步驟,大家也可以去看react-native官方中文網(rn.0.47);

五、開始建立rn模闆項目

1、打開一個cmd視窗,輸入:<code>npm install -g yarn react-native-cli</code>,此指令是為了保證rn能夠正确運作。

2、cmd打開指令視窗,切換到一個空的目錄下(盡量不要在C槽,更不要在C槽的 System32 目錄中 初始化項目!)

React-Native:簡單入門教程_環境搭建
React-Native:簡單入門教程_環境搭建

上面我建立的是HelloWorld的項目,因為HelloReact我已經建立過了,這裡隻是為了示範。

當成功的時候一般你的手機會提示你下載下傳一個app,名叫HelloWorld,一般我們操作的都是index.js檔案。

下面提供一個簡單的模闆index.js檔案,當然要想做出牛逼的rn,需要好好學習rn文法才可以進行操作哦。

上面的示範教程,我們用的都是真機,因為模拟機容易出現各種不相容的問題,一般用真機測試,不會有太多問題,也不用下載下傳模拟器,個人覺得還是挺友善的,如果有不會真機操作的,這裡給您提供一份教程:Android手機模拟調試React Native,僅限Android哦,因為本人用的是安卓機,沒有ios,不好意思!

由于本人是開發服務端,java方面的,是以對于前端隻是也是最近開始入門學習,因為項目需要全棧,是以有些東西了解的還是不夠透徹,若是寫出有問題的文法,還請大家指教,對rn入門有問題的,可以私聊我或者留言,我會盡力去将自己所知與大夥分享!

IT

繼續閱讀