react-native 开辟笔记（一）

2024年5月1日 196次阅读 来源: frontoldman

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

    原文作者：frontoldman
    原文地址: https://segmentfault.com/a/1190000009335438
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞