react-native初體驗(1) — hello world

沒有簡介，直接開始幹活吧。

默認閱讀本文的你已經安裝好 nodejs, windows用戶須要升級yarn到最新版本。

而且設置安裝源爲國內的淘寶源:

npm config set registry https://registry.npm.taobao.org --global

初始化

開發過 react 的同窗想必對於 create-react-app 並不陌生，這個cli工具大大簡化了配置，讓咱們上手便可開發。

對於 react-native， facebook官方也放出了 create-react-native-app 工具，使用起來很是簡單：

# mac和linux下面須要加sudo，windows不用加
sudo npm i -g yarn create-react-native-app

# 切換到工做目錄，初始化react-native項目
create-react-native-app hello-world

# cli工具會建立一個hello-world目錄，並寫入須要的配置
# 進入目錄，安裝依賴
# 注意: 若是yarn版本太低，會報解壓文件失敗的錯誤，升級yarn以後從新安裝便可
cd hello-world
yarn

運行模擬器(macOs)

由於cli工具已經生成了一個簡單的app.js組件，因此咱們不須要編碼，直接啓動服務便可:

yarn ios

不出意外的話，這裏會出錯誤，是提示須要設置最大打開文件數，或者是安裝 watchman, 這裏的 watchman 並不是npm包。

23:14:01: Unable to start server
See https://git.io/v5vcn for more information, either install watchman or run the following snippet:
  sudo sysctl -w kern.maxfiles=5242880
  sudo sysctl -w kern.maxfilesperproc=524288

解決方式就是按照提示一步一步來:

brew install watchman
# 或者下面的代碼
sudo sysctl -w kern.maxfiles=5242880
sudo sysctl -w kern.maxfilesperproc=524288

執行完後，再次運行，第一次運行，會卡在 Starting packager... 比較久

yarn ios

緊接着會彈出ios模擬器，滑動到最後一頁，找到expo圖標，打開它。若是沒有找到這個圖標，重啓項目就能夠了。

語法

如今回頭看看根目錄下的 app.js 。react-native 使用 jsx 語法進行開發。

樣式方面，採用 css in js 方案處理組件樣式。佈局默認使用 flexbox，縱向排列。

view組件和text組件都有各自的屬性，像color, fontSize等文本屬性，只能用於text，而不能經過view繼承，混用會出現警告。