react-native 开发笔记（一）

react-native 开发笔记

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

TabBarIos的使用

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

遇到的问题

1. 图标大小适配问题
   由于设计给出来的设计稿的2X，因此切出来的图都是2倍的，这就致使图标很大，翻遍文档，只找到一个{{uri: base64Icon, scale: 2}}这样子的配置，可是本地图片，总不能先手动转换成base64字符串再用吧。找来找去，在Image组件里面看到，图片适配方案，若是把图片保存为xx@2x.png,是否是也能够在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,恰好对应起来