React Native入門遇到的一些問題

本文示例參考自《React Native第一課》

React Native官方文檔中文版（含最新Android內容）

這裏只大概記錄下個人操做步驟和遇到的問題，必定要牢記下面這條：

若是你在Mac下遇到提示寫入權限時，記得在命令前加上sudo

 

 

安裝開發所須要的環境，參考這裏>>

 

我所遇到的幾個問題：

1) 安裝brew

curl -LsSf http://github.com/mxcl/homebrew/tarball/master | sudo tar xvz -C/usr/local --strip 1

參考自 《Mac安裝Brew》

2) 安裝並激活nvm

參考官方文檔：https://github.com/creationix/nvm#installation

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.28.0/install.sh | bash

激活nvm 「. ~/.nvm/nvm.sh」 或 「source ~/.nvm/nvm.sh」

3) 安裝react-native-cli，注意權限問題

sudo npm install -g react-native-cli

4) 初始化工程，賊慢

sudo react-native init hello
不知道什麼緣由，特別慢，下載那裏一直就不停的左右\/來回切換，超過半個小時都沒反應

5) 雙擊.xcodeproject報錯（很抱歉這裏我沒有將出錯的信息捕捉並截圖保存）

sudo chmod -R 777 工程目錄文件名   設置可讀寫的操做權限

6) 模擬器Command + R不刷新界面

參考：https://github.com/facebook/react-native/issues/306

7) 編碼時提示樣式屬性設置錯誤，React Native目前支持的樣式屬性名

Valid style props : [
    alignItems
    alignSelf,
    backfaceVisibility,
    backgroundColor,
    borderBottomColor,
    borderBottomLeftRadius,
    borderBottomRightRadius,
    borderBottomWidth,
    borderColor,
    borderLeftColor,
    borderLeftWidth,
    borderRadius,
    borderRightColor,
    borderRightWidth,
    borderStyle,
    borderTopColor,
    borderTopLetRadius,
    borderTopRightRadius,
    borderTopWidth,
    borderWidth,
    bottom,
    color,
    flex
    flexDirection,
    flexWrap,
    fontFamily,
    fontSize,
    fontStyle,
    fontWeigt,
    height,
    justifyContent,
    left,
    letterSpacing,
    lineHeight,
    margin,
    marginBottom,
    marginHorizontal,
    marginLeft,
    marginRight,
    marginTop,
    marginVertical,
    opacity,
    overflow,
    padding,
    paddingBottom,
    paddingHorizontal,
    paddingLeft,
    paddingRight,
    paddingTop,
    paddingVertical,
    position,
    resizeMode,
    right,
    rotation,
    scaleX,
    scaleY,
    shadowColor,
    shadowOffset,
    shadowOpacity,
    shadowRadius,
    textAlign,
    textDecorationColor,
    textDecorationLine,
    textDecorationStyle,
    tintColor,
    top,
    transform,
    transformMatrix,
    translateX,
    translateY,
    width,
    writingDirection
]

爲了瞭解一下CSS在React Native的使用狀況，好比如何設置多個屬性等，我作了一些嘗試，最終的效果以下圖。代碼在這裏>>

 

<View style={[styles.container, styles.space,]}>

若是你想了解各個組件裏面具體的實現及使用方法/屬性，能夠直接看相應的.js源碼，如截圖所示：

 

 

 

看上去挺簡單的一些東西，其實坑也有很多，本身去動手就知道水的深淺了，有了它開發移動應用確實很爽了，簡直就是爽歪歪了！but，你不要期望會使用它就結束了，至少你仍是要去學下Objective-C/Swift/Cocoa以及Android/Java，否則若是以後你遇到官方沒有暴露出來的底層組件，你昨辦咧？等別人來幫你解決麼，那隻能祝你好運了 :)

 

各位有致於React Native的同窗，在跳入這個坑以前，我以爲有仍是有幾項技能須要準備一下：

一、JavaScript 基本的語法要會，ES6你須要瞭解一下，否則看到相似下面的代碼肯定不會茫然嗎

var {
  AppRegistry,
  ActivityIndicatorIOS,
  Image,
  ListView,
  StyleSheet,
  Text,
  View,
} = React;

還有一個就是JSX的問題，不少人以爲它「退步了」，怎麼說呢，站在某種角度來看它，的確是這樣。但從總體上來講，它是爲了減小代碼量和編碼直觀而創造的。好比React.createElement(xxx (後面還有很長的東東，屬性啊，事件之類的)，你用<View Style={} 就搞定了，這樣看上去反而更簡單。

 

二、flex-box的佈局模型

A Complete Guide to Flexbox 這篇文章你必定不能錯過，五星推薦，不過要注意的是並非全部屬性React Native都支持，支持的幾個就是：flex、flex-direction、flex-wrap、justify-content、align-items、align-self

實際應用屬性名時，多個單詞從第二個單詞開始，首字母所有大寫，就變成了：flex、flexDirection、flexWrap、justifyContent、alignItems、alignSelf

 

三、瞭解一下React.js

React是一種思想，React js和React Native都是基於React的想法而實現的（組件化開發）。主要是由於web相對而言開發環境容易些、上手難度更低一些（我是搞Web的可徹底沒有貶低之意），你徹底能夠找個在線的編輯器，好比： http://jsfiddle.net/    http://codepen.io/，在網頁裏敲代碼而後立刻就能看到效果，總比你一直要抱着mac強吧。畢竟不少公司是不容許員工使用除公司外的電腦，外有GFW，內有公司各類屏蔽規則，WIFI限制/訪問站點限制，以前查個資料豆瓣也被屏蔽了。好在運維也要看知乎，這個卻是沒屏蔽，ORZ…

 

 

嘮叨這些多，在拉勾網上已經看到一些公司開始招React Native的人了，祝各位小夥伴玩的愉快！