从React-Native坑中爬出，我记下了这些
<h2 class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="ceten-0-0"><span data-offset-key="ceten-0-0">吐槽</span></h2><p><span style="font-size: 18px; color: rgba(255, 0, 0, 1)" data-offset-key="ceten-0-0">如果React-Native是个人，我估计已经想要打死他了。。。 </span></p>
<h2 class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="ceten-0-0"><span data-offset-key="ceten-0-0">上一篇文章</span></h2>
<div class="LinkCard FocusPlugin--unfocused LinkCard--hasImage" data-draft-node="block" data-draft-type="link-card" data-image="https://pic3.zhimg.com/v2-9364fca6539b29f6e9157a7852372406_180x120.jpg" data-image-width="419" data-image-height="248" data-offset-key="e9iic-0-0">
<ul>
<li><span class="LinkCard-backdrop"><span class="LinkCard-content"><span class="LinkCard-text"><span class="LinkCard-title" data-text="true">当React开发者初次走进React-Native的世界</span></span></span></span></li>
</ul>
</div>
<h2 class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="delg1-0-0"><span data-offset-key="delg1-0-0">前言</span></h2>
<div class="Editable-unstyled" data-block="true" data-editor="7kndb" data-offset-key="6tmtk-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="6tmtk-0-0"><span data-offset-key="6tmtk-0-0">最近因为业务需要，做了一些关于React-Native方面的开发，对一些自己遇到的问题做了记录。<span data-offset-key="6tmtk-0-1">总共 21 条要点记录，承接于上一篇文章</span></span></div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="7kndb" data-offset-key="5pl2n-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="5pl2n-0-0"><span data-offset-key="5pl2n-0-0">本文讲的很多问题，不一定是对的<span data-offset-key="5pl2n-0-1">，但确实是自己觉得可以引起一定的注意。<span data-offset-key="5pl2n-0-2">因为也是刚开始了解，很多都不确定是否是最佳实践，还请各位前辈多多指教。</span></span></span></div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="7kndb" data-offset-key="70f5m-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="70f5m-0-0"><span data-offset-key="70f5m-0-0"> </span></div>
<h2 class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="70f5m-0-0"><span data-offset-key="70f5m-0-0">正文</span></h2>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="7kndb" data-offset-key="57ikq-0-0">
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="57ikq-0-0"><span data-offset-key="57ikq-0-0"><strong>1.</strong>对于背景，可以使用<backgroundImage>组件</span></p>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="57ikq-0-0"> </div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="57ikq-0-0"><span data-offset-key="57ikq-0-0"><strong>2.</strong>字符串不写在<Text>组件里面会报错的，比如写在View组件下面的话</span></div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="57ikq-0-0"> </div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="7kndb" data-offset-key="622ra-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="622ra-0-0"><span data-offset-key="622ra-0-0"><strong>3.</strong>Web中溢出时候有内部滚动条的div，在RN中则是对应使用ScrollView组件</span></div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="622ra-0-0"> </div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="7kndb" data-offset-key="1stpu-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="1stpu-0-0"><span data-offset-key="1stpu-0-0"><strong>4.</strong>Web中我们使用click处理点击事件，在RN中要用Touchable组件的onPress事件</span></div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="1stpu-0-0"> </div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="7kndb" data-offset-key="alcgl-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="alcgl-0-0"><span data-offset-key="alcgl-0-0"><strong>5.</strong>对于导航，我们可以使用<span data-offset-key="alcgl-1-0"><span data-text="true">React-Navigation</span></span><span data-offset-key="alcgl-2-0">。</span></span></div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="7kndb" data-offset-key="abj3k-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="abj3k-0-0"><span data-offset-key="abj3k-0-0">其中导航我们有两种写法，一种是单纯写成React的props函数调用的风格，另外一种是写成Redux的风格，就是通过dispatch/action的风格，使用Redux风格，是因为少部分场景可能会用到全局导航状态共享的需求，对于多数简单的需求，我觉得写成React的风格就好了，因为简单易用</span></div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="abj3k-0-0"> </div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="7kndb" data-offset-key="10jmk-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="10jmk-0-0"><span data-offset-key="10jmk-0-0"><strong>6.</strong>对于切换类tabs，我们也许可以试试使用<span data-offset-key="10jmk-1-0"><span data-text="true">react-native-scrollable-tab-view</span></span><span data-offset-key="10jmk-2-0"><br></span></span></div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="7kndb" data-offset-key="6bs51-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="6bs51-0-0"><span data-offset-key="6bs51-0-0">但有一点非常遗憾：这个组件对下划线的支持程度仍然无法满足普遍的业务需求 —— 自定义长度的居中下划线的切换</span></div>
</div>
<div class="Image-resizerContainer" data-size="normal">
<div class="Image-captionContainer" data-size="normal"><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/v2-9977e03f3df1aeb8215a757d45bcd026_b.png" alt="" width="390" height="175" data-size="normal" data-rawwidth="1384" data-rawheight="620" data-watermark="watermark" data-original-src="https://pic3.zhimg.com/v2-9977e03f3df1aeb8215a757d45bcd026_b.jpg" data-watermark-src="https://pic4.zhimg.com/v2-71a4d1174119decd7de00006918fdcef_b.jpg"></div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="7kndb" data-offset-key="d35vv-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="d35vv-0-0"><span data-offset-key="d35vv-0-0">一般情况下，设计师给我们的下划线不是占满满一个tab的，而是只占一个tab的一部分长度，比如60%，同时还要实现居中，这时这个开源的tab模块就让我感到头疼了。</span></div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="d35vv-0-0"> </div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="7kndb" data-offset-key="4e91n-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="4e91n-0-0"><span data-offset-key="4e91n-0-0"><span data-text="true">我也想过，react-native-scrollable-tab-view中，有一个叫做tabBarUnderlineStyle可以定义下划线的样式，<span data-offset-key="4e91n-0-1"><span data-text="true">我们也许可以在这里实现长度为单tab60%的下划线居中的效果。设置长度百分比，配合marginLeft就可以了<span data-offset-key="4e91n-0-2"><span data-text="true">。</span></span></span></span></span></span></div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="4e91n-0-0"> </div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="7kndb" data-offset-key="ef6sa-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="ef6sa-0-0"><span data-offset-key="ef6sa-0-0"><span data-text="true">可是，这样的话，<span data-offset-key="ef6sa-0-1"><span data-text="true">我们切换的时候，平滑过渡的动画效果怎么实现？模块没有提供可以切入的相关props啊，<span data-offset-key="ef6sa-0-2"><span data-text="true">实在没有办法，我最终还是无奈得自己定义了一个。当然了，模块其实提供了另外一个方<span data-offset-key="ef6sa-0-0">法，可以切入tab渲染，那就是renderTabBar这个props,但我仔细思考一番后，发现：这好像和我自己写一个工作量上没区别 emmmm。</span></span></span></span></span></span></span></div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="ef6sa-0-0"> </div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="7kndb" data-offset-key="23bjr-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="23bjr-0-0"><span data-offset-key="23bjr-0-0">如果大家有比较好的方案，还请不吝提供一下，谢谢。</span></div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="7kndb" data-offset-key="cm5p3-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="cm5p3-0-0"><span data-offset-key="cm5p3-0-0"> </span></div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="7kndb" data-offset-key="9lvj8-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="9lvj8-0-0"><span data-offset-key="9lvj8-0-0"><strong>7.</strong>borderRadius不能用百分比了，要用数值</span></div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="9lvj8-0-0"> </div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="9lvj8-0-0"> </div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="7kndb" data-offset-key="e39ad-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="e39ad-0-0"><span data-offset-key="e39ad-0-0"><strong>8.</strong> flex放心用吧！不用再畏手畏脚了，因为这里是移动端</span></div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="e39ad-0-0"> </div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="7kndb" data-offset-key="fbedj-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="fbedj-0-0"><span data-offset-key="fbedj-0-0"><span data-text="true"><strong>9.</strong>如果要获取某个组件在屏幕中的位置组，可以利用组件布局完毕时触发的onLayout方法<span data-offset-key="fbedj-0-1"><span data-text="true">，可以在这里获取组件的位置，但令人遗憾的是，这个方法是异步的，异步的特征可能会与你的需求冲突，如果每个组件的物理距离是确定的，而非灵活变化的话，是可以写死的 。</span></span></span></span></div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="fbedj-0-0"> </div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="7kndb" data-offset-key="601qk-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="601qk-0-0"><span data-offset-key="601qk-0-0"><span data-text="true"><strong>10.</strong>RN使用动画的时候，组件一定要使用专门的动画组件Animated.View,<span data-offset-key="601qk-0-1"><span data-text="true"> 不然没有动画效果，切记。</span></span></span></span></div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="601qk-0-0"> </div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="7kndb" data-offset-key="bise0-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="bise0-0-0"><span data-offset-key="bise0-0-0"><span data-text="true"><strong>12.</strong>除了动画和最近新增的CSS特性外，我们原本在web中能用的CSS属性大部分还是能用的。<span data-offset-key="bise0-0-1"><span data-text="true">当然实现肯定和我们理解的“CSS”不一样了，下面是<span data-offset-key="bise0-0-2"><span data-text="true">部分<span data-offset-key="bise0-0-3"><span data-text="true">列表</span></span></span></span></span></span></span></span></div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="bise0-0-0">
<div class="cnblogs_code">
<pre>Flex
Width
htight
margin
Padding
textAlign
Overflow
fontWeight
Position</pre>
</div>
<p> </p>
</div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="7kndb" data-offset-key="5f4rg-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="5f4rg-0-0"><span data-offset-key="5f4rg-0-0"><strong>13.</strong>动画类的”CSS"是全体不能用了，你就忘了它们吧</span></div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="5f4rg-0-0"> </div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="5f4rg-0-0"> </div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="7kndb" data-offset-key="1cilf-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="1cilf-0-0"><span data-offset-key="1cilf-0-0"><span data-text="true"><strong>14.</strong>单纯依靠Image的<strong>width:100%</strong>或者<strong>width: Dimensions.get(‘window’).width</strong>，可能无法实现图片匹配全屏宽度<span data-offset-key="1cilf-0-1"><span data-text="true">，还需要设置<strong>resizeMode: ‘contain’</strong></span></span></span></span></div>
</div>
<div class="Image-resizerContainer" data-size="normal">
<div class="Image-captionContainer" data-size="normal"><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic2.zhimg.com/v2-7f7256f947576136b249fd73a4200bbd_b.png" alt="" width="325" height="248" data-size="normal" data-rawwidth="938" data-rawheight="716" data-watermark="watermark" data-original-src="https://pic2.zhimg.com/v2-7f7256f947576136b249fd73a4200bbd_b.jpg" data-watermark-src="https://pic4.zhimg.com/v2-0b1787c7e2e4746fc0ca5f08eabc6c9b_b.jpg"></div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="7kndb" data-offset-key="ctfg2-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="ctfg2-0-0"><span data-offset-key="ctfg2-0-0"> </span></div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="7kndb" data-offset-key="2qmko-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="2qmko-0-0"><span data-offset-key="2qmko-0-0"><span data-text="true"><strong>15.</strong> 接上14，除此你会发现，图片的宽度变小了，但是外层的image控件的高度可能还是没有变化，<span data-offset-key="2qmko-0-1"><span data-text="true">因为它是开始就定死的，不是动态变化的，不是”auto”的，所以还要另外结合图片比例和屏幕宽度，进行设置</span></span></span></span></div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="2qmko-0-0"> </div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="7kndb" data-offset-key="91qu0-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="91qu0-0-0"><span data-offset-key="91qu0-0-0"><span data-text="true"><strong>16.</strong>组件设置为position: absolute后，它的index是默认比其他组件要大的<span data-offset-key="91qu0-0-1"><span data-text="true">，可能会遮盖其他组件，这点要注意</span></span></span></span></div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="91qu0-0-0"> </div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="7kndb" data-offset-key="8h9m0-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="8h9m0-0-0"><span data-offset-key="8h9m0-0-0"><span data-text="true"><strong>17.</strong> Text可以设置border-radius，但是它的圆角不会切割掉背景。<span data-offset-key="8h9m0-0-1"><span data-text="true">（就是说，虽然会出现border,border也是圆的，但是border外部的）所以，<span data-offset-key="8h9m0-0-2"><span data-text="true">关键的时候还是要用View组件<span data-offset-key="8h9m0-0-3"><span data-text="true">去设置文字外部背景圆角</span></span></span></span></span></span></span></span></div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="7kndb" data-offset-key="d2bqr-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="d2bqr-0-0"><span data-offset-key="d2bqr-0-0">单纯用Text去切割圆角背景，是切不出来的，boder确实会有圆角，但是无法切割边框</span></div>
</div>
<div class="Image-resizerContainer" data-size="small">
<div class="Image-captionContainer" data-size="small"><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic2.zhimg.com/v2-e4b493f356ede0b393445ab935745eb5_b.png" alt="" width="296" height="195" data-size="small" data-rawwidth="440" data-rawheight="290" data-watermark="watermark" data-original-src="https://pic2.zhimg.com/v2-e4b493f356ede0b393445ab935745eb5_b.jpg" data-watermark-src="https://pic2.zhimg.com/v2-3bee84724686db0877962f367b0be559_b.jpg"></div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="7kndb" data-offset-key="1ocq0-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="1ocq0-0-0"><span data-offset-key="1ocq0-0-0"> </span></div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="7kndb" data-offset-key="5mrh3-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="5mrh3-0-0"><span data-offset-key="5mrh3-0-0"><span data-text="true"><strong>18.</strong>似乎RN并不支持boxSizing属性，按照我们在Web中的理解规则：它默认指定的是类似border-box的行为<span data-offset-key="5mrh3-0-1"><span data-text="true">，也就是width是包含border的</span></span></span></span></div>
</div>
<div class="Image-resizerContainer" data-size="small">
<div class="Image-captionContainer" data-size="small">
<div><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic1.zhimg.com/v2-405ab7a071c372f654407dcc03765768_b.png" alt="" width="364" height="165" data-size="small" data-rawwidth="582" data-rawheight="264" data-watermark="watermark" data-original-src="https://pic1.zhimg.com/v2-405ab7a071c372f654407dcc03765768_b.jpg" data-watermark-src="https://pic2.zhimg.com/v2-29c740aebc2b4d4748a8891499b50589_b.jpg"></div>
<div> </div>
<div> </div>
</div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="7kndb" data-offset-key="cukbk-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="cukbk-0-0"><span data-offset-key="cukbk-0-0"><span data-text="true"><strong>19.</strong>承接20,画圆的时候，borderRadius是width/height的一半<span data-offset-key="cukbk-0-1"><span data-text="true">，而不是width 减去 borderWidth的一半</span></span></span></span></div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="cukbk-0-0"> </div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="7kndb" data-offset-key="5l65g-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="5l65g-0-0"><span data-offset-key="5l65g-0-0"><span data-text="true"><strong>20.</strong>外层视图的overflow: hidden可能对内层视图没有作用<span data-offset-key="5l65g-0-1"><span data-text="true">，还是会出现内层视图超出外层的情况</span></span></span></span></div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="5l65g-0-0"> </div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="7kndb" data-offset-key="6dgtt-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="6dgtt-0-0"><span data-offset-key="6dgtt-0-0"><strong>21.</strong>RN 带背景的Text自适应文字内容宽度的方法实现</span></div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="7kndb" data-offset-key="ajrlr-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="ajrlr-0-0"><span data-offset-key="ajrlr-0-0">在使用RN的文本的时候，遇到了一件比较无语的事情，就是我想写一个类似“文本标签”的样式，就是一段可变长度的文本，然后外面包裹一个长方形的背景，当然是有圆角的那种。然后呢，我发现，直接用<Text>标签包裹文本的话，Text标签的背景颜色是会占满全屏的，用View包裹也同样出现这种情况</span></div>
</div>
<div class="Image-resizerContainer" data-size="small">
<div class="Image-captionContainer" data-size="small"><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic2.zhimg.com/v2-30ed153c637e00559af6d7ae5b6ebc3d_b.png" alt="" width="377" height="370" data-size="small" data-rawwidth="744" data-rawheight="730" data-watermark="watermark" data-original-src="https://pic2.zhimg.com/v2-30ed153c637e00559af6d7ae5b6ebc3d_b.jpg" data-watermark-src="https://pic1.zhimg.com/v2-3ff02ed77ad7953ac1d76e511cc0197c_b.jpg"></div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="7kndb" data-offset-key="a3nme-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="a3nme-0-0"><span data-offset-key="a3nme-0-0"><span data-text="true">那么，怎么实现这种“<span data-offset-key="a3nme-0-1"><span data-text="true">带背景的Text自适应文字内容宽度”呢</span></span></span></span></div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="7kndb" data-offset-key="58k41-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="58k41-0-0"><span data-offset-key="58k41-0-0">实现</span></div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="7kndb" data-offset-key="1trqh-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="1trqh-0-0"><strong><span data-offset-key="1trqh-0-0">方式一：双重Text法</span></strong></div>
</div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="7gfuc-0-0">
<div class="cnblogs_code">
<pre><Text style={{backgroundColor: 'transparent'}}>
<Text style={{backgroundColor: 'red'}}>sss</Text>
</Text><span>
// 备注：用这种Text法无法设置padding！border-radius，对于细节丰富的标签样式实现会有问题</span></pre>
</div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="7kndb" data-offset-key="bjcvr-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="bjcvr-0-0"><strong><span data-offset-key="bjcvr-0-0">方式二： flex-align法</span></strong></div>
</div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="9imi8-0-0">
<div class="cnblogs_code">
<pre><View style={{alignSelf: 'flex-start'}}>
<Text>aaaaaa</Text>
</View></pre>
</div>
<span class="prism-token token operator"><br></span></div>
<div class="Image-resizerContainer" data-size="normal">
<div class="Image-captionContainer" data-size="normal"><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic1.zhimg.com/v2-a4aa1638ee60819beccddba3c1fe65a8_b.png" alt="" width="282" height="71" data-size="normal" data-rawwidth="690" data-rawheight="174" data-watermark="watermark" data-original-src="https://pic1.zhimg.com/v2-a4aa1638ee60819beccddba3c1fe65a8_b.jpg" data-watermark-src="https://pic4.zhimg.com/v2-6b260bebbfbec8e133ac9ef0ced1a4ab_b.jpg"></div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="7kndb" data-offset-key="54k34-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="54k34-0-0"> </div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="54k34-0-0"><span data-offset-key="54k34-0-0">就能实现类似上面的效果</span></div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="54k34-0-0"> </div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="54k34-0-0">22.Scroll-View组件滚动时候会回到原位</div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="54k34-0-0">解决办法</div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="54k34-0-0">1.给它定义高度</div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="54k34-0-0">2.给它加上flex : 1</div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="54k34-0-0"> </div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="54k34-0-0"><span style="font-size: 16px">23.Flatlist的大量坑点</span></div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="54k34-0-0">FlatList是RN推荐的滚动列表实现的选择，但是它却同样存在大量坑点</div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="54k34-0-0">
<ul>
<li>onEndReached方法在到达底部时会触发多次，需要使用flag变量规避</li>
<li>长列表滚动太快会白屏</li>
<li><em id="__mceDel">scrollToIndex定位不精准</em></li>
</ul>
<p><span style="font-size: 16px">24.Android和IOS详解</span></p>
<div>1.IOS默认是不隐藏溢出的（相当于overflow:visable），Android默认是隐藏溢出的（overflow: hidden），可以使用一个叫做：react-native-view-overflow的npm模块化解这个问题</div>
<div>2.当zIndex设置负数的时候，在Android和IOS中的层叠顺序可能是不一致的</div>
<div>3.在ProgressiveImage组件中的containerStyle中设置border和border-radius的话，在IOS中表现正常，但Android会表现出反常的效果</div>
<div> </div>
<div><strong>25.RN不支持position:fixed</strong></div>
<div>对于一些吸顶的效果可以用Animation等方式替代实现 https://www.yzlfxy.com/jiaocheng/JavaScript/325912.html</div>
<p><em></em></p>
<p> </p>
</div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="54k34-0-0"> </div>
</div>
</div>
<div id="MySignature" role="contentinfo">
我叫彭湖湾，请叫我胖湾<br><br>
来源：https://www.cnblogs.com/penghuwan/p/11633547.html
頁:
[1]