前言
- 最近对react-native产生些兴趣，准备学一学，写写demo练练手，然而之前对react页不是很熟悉，所以一边学一边写code，一边看react-native的文档一边撘环境。中途还是遇到很多问题，写篇文章mark下。
react-native搭建开发环境时遇到的问题
- 搭建Android开发环境：
- java版本不能装9.0+的，路径格式不同，Android-studio无法识别路径。
- Android SDK 要装25.0+的，不然会提示版本过低无法继续，然而教程(甚至是fb官网上)还是写的装23.0
- 模拟器，先在Android-studio打开Android模拟器之后，再在命令行执行react-native run-android命令
- 执行react-native run-*命令时，启动的packager server需要使用8081端口，确保这个端口没有占用！
RN中写样式
- 本来平时我css就写得少，RN中这种变种的css写起来更蛋疼。。。。React-Native 样式指南
- RN中的样式相当于css的缩减版，命名方式要用驼峰法，然后大部分属性都能和css中对应。布局：也有相对定位和绝对定位，也支持flex。官方推荐flex，可以解决大多数的布局情况。
- 建议使用StyleSheet.create()生成样式的类名，也可以直接在组件上写"内联"样式。
- RN中元素的宽高是没有单位的，直接用数字表示即可，也可以用flex来实现弹性宽高。
- 另外就是要注意，不同的组件可以设置的样式是不同的，比如遇到无法设置宽高的组件就只能在它外层包个view，然后设置这个view的宽高。
RN中调试
- 打开调试菜单：iOS模拟器中：Command⌘ + D 快捷键；Android模拟器对应的则是Command⌘ + M
- Enable Live Reload：开启自动刷新
- Enable Hot Reload：开启热加载
- 访问控制台日志:在终端中运行：react-native log-ios或者log-android
- 在开发者菜单中选择"Debug JS Remotely"选项，即可以开始在Chrome中调试JavaScript代码。点击这个选项的同时会自动打开调试页面 http://localhost:8081/debugger-ui.
- 注:Chrome中并不能直接看到App的用户界面，而只能提供console的输出，以及在sources项中断点调试js脚本。
RN中的网络通信
- 文档上介绍的是使用fetch，我也专门去了解了一下下，算是ajax的进化版，结合了一些html5的新特性。RN中也支持websocket。
- 默认情况下，iOS会阻止所有非https的请求。如果你请求的接口是http协议，那么首先需要添加一个App Transport Security的例外，详细可参考这篇帖子。
RN中的数据存储
- 在浏览器环境，我们可以使用cookie、localstorage或者sessionstorage来实现数据缓存，在RN中则不能使用以上的三种方式。
- AsyncStorage是一个简单的、异步的、持久化的Key-Value存储系统，它对于App来说是全局性的。它用来代替LocalStorage。但是需要注意的时，RN这里的读写缓存操作全都是异步的和在浏览器中操作缓存有区别，然后我们使用时最好也是自己封装一层DeviceStorage
