react-native 笔记

地址：http://note.youdao.com/noteshare?id=98a69bc40f5a336a7aa7279becec4d33

brew update && brew doctor

brew install watchman

brew upgrade flow

npm install react-native-cli -g

brew install android-sdk

坑1:$ react-native init demo --version 0.41(要加上版本号)

npm start (启动热更行服务器)

react-native run-android

浏览器调试：

optin +command +j ,source ,找到源码，断点

大家应该发现了第二段代码多了 onPress={()=>{}}

这个是个大坑 本以为组件提供的属性 触发事件应该是分装在内部的 然而我们想多了 得自己手动加个事件 才能使得那些属性有效

<TouchableHighlight underlayColor='#fff' onPress={()=>{}}> <View>...</View> </TouchableHighlight>

真机调试：

adb reverse tcp:8081 tcp:8081

http://blog.csdn.net/wds1181977/article/details/53418219

https://github.com/facebook/react-devtools/tree/master/packages/react-devtools

chorme 调试

http://blog.csdn.net/developer_jiangqq/article/details/50508534

Install the react-devtools package globally:

npm install -g react-devtools

react-devtools

在Android上用Stetho调试

http://blog.csdn.net/Cloudox_/article/details/52386495

坑2:

ios运行时报错：

ios :0.45版本有坑，不要用，github 挂了

iOS-bug·Failed to connect to github-production-release-asset-2e65be.s3.amazonaws.com port 443: Operation time out

http://bbs.reactnative.cn/topic/4022/%E6%89%A7%E8%A1%8C-run-ios-%E6%97%B6%E6%8A%A5%E9%94%99-failed-to-connect-to-%E5%A4%AA%E9%95%BF%E5%86%99%E5%9C%A8%E5%86%85%E5%AE%B9%E4%B8%AD-443-connection-refused/6

http://bbs.reactnative.cn/topic/4301/ios-rn-0-45%E4%BB%A5%E4%B8%8A%E7%89%88%E6%9C%AC%E6%89%80%E9%9C%80%E7%9A%84%E7%AC%AC%E4%B8%89%E6%96%B9%E7%BC%96%E8%AF%91%E5%BA%93-boost%E7%AD%89

坑3:

一定要加上./ 否则会报错

[图片上传失败...(image-4bbe6d-1524853955286)]

坑4:

[图片上传失败...(image-21cbdf-1524853955286)]

不设置不显示内容

https://github.com/react-native-training/react-native-elements

http://www.lcode.org/react-native/

1. Clear watchman watches: watchman watch-del-all.

2. Delete the node_modules folder: rm -rf node_modules && npm install.

3. Reset packager cache: rm -fr $TMPDIR/react-* or npm start -- --reset-cache.

react-native 知识点总结：

[图片上传失败...(image-4344e6-1524853955286)]

1.初始化的时候

[图片上传失败...(image-d791e4-1524853955286)]

2.父组件 state变化的时候

[图片上传失败...(image-ae2ce1-1524853955286)]

3.父组件 state变化，同时改变子组建的props

[图片上传失败...(image-a66912-1524853955286)]

[图片上传失败...(image-4ad9f8-1524853955286)]

https://segmentfault.com/q/1010000010491983

create-react-app ExampleApp npm run eject //非react npm install --save-dev babel-plugin-transform-decorators-legacy //针对react npm install babel-preset-stage-2 --save-dev npm install babel-preset-react-native-stage-0 --save-dev npm install --save mobx mobx-react

根目录下创建.babelrc

// react { "presets": ["react-native-stage-0/decorator-support"] }

npm install mobx --save

npm install mobx-react --save

"babel-preset-react-native-stage-0": "^1.0.1",

"babel-preset-stage-2": "^6.24.1",