1. 程式人生 > >React Native 學習筆記(二)

React Native 學習筆記(二)

坑一,環境好了,但是因為專案需求經常要安裝一些三方庫,xcode-select: error: tool ‘xcodebuild’ requires Xcode, but active developer directory ‘/Library/Developer/CommandLineTools’ is a command line tools instance

遇到這個錯誤:
在安裝cocoapods完畢後,開始安裝第三方庫的時候,會報這個錯。這是因為xcode的路徑不對,解決辦法如下:

安裝 Xcode (從這下載 http://developer.apple.com) 如果你還沒有安裝的話,
在命令列工具中輸入下面的命令:

sudo xcode-select -s /Applications/Xcode.app/Contents/Developer
注意: 確保你的xcode和上面的路徑一直 ,很有可能是下面這種情況 /Applications/Xcode-Beta.app/Contents/Developer 因為你使用了beta版的xcode。如果你使用了beta版的xcode,就用上面這個路徑替代。其他可能,就是你修改了xcode的名字,同理,把路徑改對。怎麼看呢?從應用程式裡看你的xcode程式名就知道了。

坑二,報 Unable to resolve module:react-module

解決 用 npm install react -module –save

例如報could resolve:react-time-mixin
執行:npm install react-time-mixin –save

坑三,報錯
Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object

坑四,報錯null is not an object(evaluating ‘this.state.splashed’)
在react native用到es6的時候初始化state應該在constructor ()內,而不是用getInitialState()

export default class MyProject extends Component {
  constructor(props){
      super(props);
      this.state={
        selectedTab:'home'
      }
  }
 }

tips 一,目前rn支援的樣式屬性名

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
]

報onlyChild must be passed children with exactly one child
這個錯一般是你本地的程式碼出現閉合不對應的情況,出現意外的先閉合,導致的

network request failed
有可能是因為IOS 的ATS協議引起的,在工程裡面新增這個
這裡寫圖片描述

在 React-Native 中,JS 呼叫 OC 流程大致如下:
JS call => JS Bridge => OC Bridge => OC modules & functions
OC 程式碼通過 EXPORT_* 方法去定義暴露模組和函式,並通過 Runtime 的方法去從新包裝 OC 程式碼到 Block 中,這樣 JS 就可以呼叫 OC 程式碼了。

多看看知乎才有活下去的勇氣!