react-native 开发笔记（一）

react-native 开发笔记

开始使用react-native开发产品，讲讲今天遇到的坑

TabBarIos的使用

一般app的设计都是主页是一个tab页面，我们的app产品也是不例外的，所以我使用了这个iOS专用的组件(先搞定ios，再考虑兼容性)

遇到的问题

1. 图标大小适配问题
   因为设计给出来的设计稿的2X，所以切出来的图都是2倍的，这就导致图标很大，翻遍文档，只找到一个{{uri: base64Icon, scale: 2}}这样子的配置，但是本地图片，总不能先手动转换成base64字符串再用吧。找来找去，在Image组件里面看到，图片适配方案，如果把图片保存为[e-mail],是不是也可以在icon里面使用？结果是令人欣慰的。

2. active颜色问题
   这个不算问题了，算是优势。一般做web开发，如果不是图标字体的话，我们会为图片的选中和不选中准备两张图片做切换。在react-native里面不需要这么复杂，只需要准备一张图片，通过配置就可以解决了

   unselectedTintColor="#929292"
   tintColor="#007aff"
   barTintColor="#f7f7f7"

Navigator的使用

我使用的react-native的版本是0.44，这个版本里面移除了Navigator这个组件，所以在非正式版本里面出现问题，需要优先查看是不是版本问题导致的。不过幸好的是，react-natie提示做的很好，原来它们把Navigator移到了react-native-deprecated-custom-components这个单独的包里，安装引用一下就好了

flexbox的使用

如果你把一个View设置flex:1，它默认会占满剩下的垂直空间。这可能会导致开发者很困惑，怎么高度和我想的不一致呢？那只要把剩余的View高度都设置准确，这些都会迎刃而解。
所以开发的时候最好尽量先把外面的框框尺寸优先设置，这样子的布局看起来比较合理之后，再开发其他的布局就不会有困惑

因为flexbox尺寸是按照1，2这种最终比例在计算的，我们可以根据实际设计稿像素，来设置flex的值，比如width: 150px我们就设置成flex: 150,刚好对应起来