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的同學,在跳入這個坑之前,我覺得有還是有幾項技能需要准備一下:

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.js
React是一種思想,React js和React Native都是基於React的想法而實現的(組件化開發)。主要是因為web相對而言開發環境容易些、上手難度更低一些(我是搞Web的可完全沒有貶低之意),你完全可以找個在線的編輯器,比如: http://jsfiddle.net/    http://codepen.io/,在網頁里敲代碼然后馬上就能看到效果,總比你一直要抱着mac強吧。畢竟很多公司是不允許員工使用除公司外的電腦,外有GFW,內有公司各種屏蔽規則,WIFI限制/訪問站點限制,之前查個資料豆瓣也被屏蔽了。好在運維也要看知乎,這個倒是沒屏蔽,ORZ…
 
 
嘮叨這些多,在拉勾網上已經看到一些公司開始招React Native的人了,祝各位小伙伴玩的愉快!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM