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源碼，如所示：

 

 

 

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

 

各位有致於React Native的同學，在跳入這個坑之前，我覺得有還是有幾項技能需要準備一下：

1、JavaScript 基本的文法要會，ES6你需要瞭解一下，不然看到類似下面的代碼確定不會茫然嗎

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

還有一個就是JSX的問題，很多人覺得它“退步了”，怎麼說呢，站在某種角度來看它，的確是這樣。但從整體上來說，它是為了減少代碼量和編碼直觀而創造的。比如React.createElement(xxx (後面還有很長的東東，屬性啊，事件之類的)，你用<View Style={} 就搞定了，這樣看上去反而更簡單。 2、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 3、瞭解一下React.jsReact是一種思想，React js和React Native都是基於React的想法而實現的（組件化開發）。主要是因為web相對而言開發環境容易些、上手難度更低一些（我是搞Web的可完全沒有貶低之意），你完全可以找個線上的編輯器，比如：http://jsfiddle.net/    http://codepen.io/，在網頁裡敲代碼然後馬上就能看到效果，總比你一直要抱著mac強吧。畢竟很多公司是不允許員工使用除公司外的電腦，外有GFW，內有公司各種屏蔽規則，WIFI限制/訪問網站限制，之前查個資料豆瓣也被屏蔽了。好在營運也要看知乎，這個倒是沒屏蔽，ORZ…  嘮叨這些多，在拉勾網上已經看到一些公司開始招React Native的人了，祝各位小夥伴玩的愉快！

React Native入門遇到的一些問題