入門RN心得

入門RN心得

衆所周知RN從2013年進入APP開發市場至今已經流行5年之久了，曾3年前差點就有使用RN做項目開發的機會，但還是命運安排錯過了，沒想到這一錯過就是3年之久。錯過了進入RN的黃金時期也錯過了RN的填坑時期。好了廢話不多說，進入正題吧

先介紹一下RN，這一點往往在面試時會提到

RN是Facebook在2015年4月開源的跨平台移動應用開發架構，是FB開源的React架構的衍生物，React是基于JS的UI架構，是将MVC中的View單獨抽出建構UI，其元件化的思路使得該架構具有很大的可維護性，借用一句話：凡FB出品，必屬精品。要學習RN必須要懂JS，要了解React，還得要懂原生架構的特性，寫iOS要熟悉UIKit特性，寫Android要熟悉Activity和View。由于小編專業寫iOS，剛上手寫Android,是以隻以iOS為例來講解RN。

一，搭建RN開發環境

學任何一門開發語言首先第一步當時搭建該語言的開發環境。官方已經有很好的教程：https://reactnative.cn/docs/getting-started/

這裡提幾個要點，也是反複遇到的幾個坑，

watchman的安裝，遇到有報錯，我這裡是因為在/usr目錄下缺少local檔案夾

npm是react各種架構的管理器

yarn是npm的更新版比npm快

目前不知道是坑還是常态，每次開機後運作RN項目都必須先在項目目錄下運作

npm install

npm start

然後才能 react-native run-ios

二，學習JSX

1，Props

2，State

3，樣式（CSS）

4，布局

作為iOS原生開發的程式猿，其中樣式和布局的學習至關重要，學會了樣式和布局基本RN也就入門了。

查找端口使用情況

1、終端

2、cd 到項目目錄

3、react-native start

4、lsof -n -i4TCP:8081 //這句可以看列印出8081端口下的服務

5、kill -9 //終止你其他占用端口

總結一下學習RN過程使用的工具，嘗試了幾款ide，例如deco，subline，xcode；最後還是選擇了webstorm，用了破解版的webstorm。deco是FB專門為RN設計的ide，但是類的索引做的很不好，不能依靠點選類找到類的聲明。subline也是沒法關聯檔案索引，且目錄顔色太單調。xcode不用說，對js的支援不是很好。是以最後選擇了webstorm，破解版的用的還不錯。

學習連結：

https://www.cnblogs.com/yexiaochai/p/6042112.html

http://www.devio.org/2019/03/03/react-basis-for-react-native/