react-native 开发笔记（一）

waltr 发布于2019-08-20 16:23 / 2711人阅读

摘要：颜色问题这个不算问题了，算是优势。一般做开发，如果不是图标字体的话，我们会为图片的选中和不选中准备两张图片做切换。这可能会导致开发者很困惑，怎么高度和我想的不一致呢那只要把剩余的高度都设置准确，这些都会迎刃而解。

react-native 开发笔记

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

TabBarIos的使用

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

遇到的问题

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

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,刚好对应起来

云服务器 GPU云服务器学习笔记一 java开发入门笔记 react-native React-Native版Mung

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82897.html

react-native 开发笔记（二）

摘要：原来需要在里面把字体拖进去，然后在里面配置一个里面的配置项如果没有这条，可以新增一个，然后选择到 react-native 开发笔记 Navigator导航 app的导航路径是tab->tabItem->tabItemChild，交互设计的要求是tab子页面的显示是要盖过tab导航条的，如果我们把tab作为根组件，Navigator作为tab的子tab的话，tabItemChild始终...

nidaye 2019-08-21 11:40 评论0 收藏0
react-native, react-navigation, redux 学习笔记

摘要：的使用用户发出函数算出新的重新渲染三大原则单一数据源，利用的形式向下传播数据流决定只读，通过修改通过纯函数来修改组件状态，是描述动作的纯函数连接和基于全局的，选择我们要注入的不同的组件分开把注入，读取方法三剑客先确定一下初始状 redux的使用 react-native, react, react-redux, react-navigaition, redux-thunk, redu...

妤锋シ 2019-08-20 17:47 评论0 收藏0
前端补集 - 收藏集 - 掘金

摘要：原文地址一个非常适合入门学习的博客项目前端掘金一个非常适合入门学习的项目，代码清晰结构合理新闻前端掘金介绍一个由编写的新闻。深入浅出读书笔记知乎专栏前端专栏前端掘金去年的一篇老文章，恰好今天专栏开通，迁移过来。破解前端面试（80% 应聘者不及格系列）：从闭包说起 - 掘金修订说明：发布《80% 应聘者都不及格的 JS 面试题》之后，全网阅读量超过 6W，在知乎、掘金、cnodejs ...

YorkChen 2019-08-29 12:41 评论0 收藏0
前端补集 - 收藏集 - 掘金

摘要：原文地址一个非常适合入门学习的博客项目前端掘金一个非常适合入门学习的项目，代码清晰结构合理新闻前端掘金介绍一个由编写的新闻。深入浅出读书笔记知乎专栏前端专栏前端掘金去年的一篇老文章，恰好今天专栏开通，迁移过来。破解前端面试（80% 应聘者不及格系列）：从闭包说起 - 掘金修订说明：发布《80% 应聘者都不及格的 JS 面试题》之后，全网阅读量超过 6W，在知乎、掘金、cnodejs ...

AbnerMing 2019-08-20 16:57 评论0 收藏0