Taro中的坑

Taro什么玩意啊，文档文档不全，案例案例也不详细！

1 ScrollView自动撑开

视图内容（也就是ScrollView内部的视图）

在封装自己的弹框的时候用到ScrollView，如果给ScrollView一个固定的高度，他是肯定会滚动。

但是我们设计要求是让他自动撑开，达到最大高度再出现滚动。

.layout-scrollView {
      //隐藏scrollView的滚动条
      ::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
        color: transparent;
      }
      display: flex;
      flex-direction: column;
      max-height: 90vh;
}

不要给ScrollView设置高度，只设置一个最大高度，那么ScrollView就会在没有达到最大高度时候自己撑开，且不会出现滚动。内容视图到达最大才出现滚动。

1.2 ScrollView隐藏滚动条

 ::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
        color: transparent;
}

1.3 ScrollView设置padding-bottom margin-bottom失效

开发中经常都会设置一个底部安全高度，使用padding-bottom margin-bottom都可以。但是给ScrollView设置时候，如果视图内容超过ScrollView的最大高度，那么padding-bottom margin-bottom就会失效。视图内容不超过ScrollView的最大高度时候padding-bottom margin-bottom可以生效。

解决：

只能给视图内容最后一个子元素设置padding-bottom margin-bottom。

1.4 弹框中ScrollView滚动透传问题

原文地址 Taro3.x 容易踩坑的点（阻止滚动穿透，弹框蒙层父级定位）_taro弹窗-优快云博客

解决弹框滚动的时候，下层也会滚动问题=》阻止滚动穿透(react,vue)
案例描述：

页面展示时需要滚动条才可以显示完整，但是当我们显示弹框的时候，即使不需要滚动条，但是页面仍然可以滚动，并且下层内容会随着滚动变化。

阻止滚动穿透
Taro 3 的事件机制。因为事件都以 bind 的形式进行绑定，因此不能使用 e.stopPropagation() 阻止滚动穿透。

针对滚动穿透，目前总结了两种解决办法：

一、样式
使用样式解决：禁止被穿透的组件滚动。

这也是最推荐的做法。

二、catchMove
Taro 3.0.21 版本开始支持
但是地图组件本身就是可以滚动的，即使固定了它的宽高。所以第一种办法处理不了冒泡到地图组件上的滚动事件。

需要真机预览或者模拟查看，pc模拟器上看不出效果。

在需要的弹框scroll-view 外层加上下面的内容包裹scroll-view 使用后真机上将不会滚动下层内容

<View catchMove></View>

解决弹框内部再显示其余的弹框，父级高度的定位限制，（RootPortal）
root-portal 使整个子树从页面中脱离出来，类似于在 CSS 中使用 fixed position 的效果。主要用于制作弹窗、弹出层等。
案例描述：

以我项目中为例，使用了taro-ui的‘AtFloatLayout’组件，

项目中当我使用'AtFloatLayout'显示购物车后，内部又嵌套了一个‘AtModal’来展示点击购物车内部商品时出现切换规格的弹框；

此时如果不作处理，AtModal的最大高度是AtFloatLayout的高度，如果AtFloatLayout比较低AtModal无法再整个页面中上下居中显示，且可能会显示不全。

例如此图：未添加root-portal 的情况

解决方案：

<AtFloatLayout>
    <RootPortal>
        <AtModal></AtModal>
    </RootPortal>
</AtFloatLayout>
成功后模拟器element显示

解决后显示上下居中 以窗口最大为父级

成功解决弹框内部再显示其余的弹框高度的问题

2 封装组件修改样式问题

一般我们都会使用less或者sass，使用classnames三方库来使用多个样式

import cls from 'classnames'
const { className = '' } = props
<View
    className={cls(['demo', className])}

但是这种方式通过props上传进来的className只是一个字符串。

父组件

.container {
  background: #f2f1f4;
  padding-bottom: 28px;
  .demo-test {
    background-color: red;
  }
}

  <View className="container">
      <Demo className="demo-test">
        <Text>1111</Text>
      </Demo>
</View>

传递给子组件className="demo-test"，但是父组件最后生成的是

.container  .demo-test {background-color: red;}

子组件

.container {
  background-color: #ff00ff;
  width: 200px;
  height: 200px;
  .demo-test {
    background-color: green;
  }
}

<View
      className={cls(['container', className])}
     
    >
      {children && children}
    </View>

虽然在子组件自己里面也有.container .demo-test,但是从父组件传进来的.container .demo-test后声明，所以它的优先级高。

至于它的根本原理，我觉得需要看classnames的底层出来。

有意思的是在父组件和子组件都定义了.container 类，但是子组件的.container类会覆盖父组件定义的.container类！TODO还没搞懂为啥？

所以在项目中即使使用了less或者sass，也并不能解决样式覆盖问题，还是需要使用index.module.less。

3 解决 env(safe-area-inset-bottom)不生效问题

使用css自带的max()方法，该方法默认取最大值。

margin-bottom: Max(env(safe-area-inset-bottom), 40px);

小写max会保持，使用大写Max。这是sass编译问题。

4   image被挤压变形问题

 <View style={{ display: 'flex', flexDirection: 'row' }}>
        <Image src={aa}></Image>
        <Image src={bb}></Image>
        <View>xxxxx啊阿啊阿啊阿啊阿啊阿啊阿啊阿啊阿啊阿啊阿啊</View>
</View>

因为主轴设置水平方向，文本一行占不下的时候，这个时候图片会被挤压变形，比如我设置图片大小了 {width: 40rpx;height: 40rpx;}，但是实际渲染出来并不是一个正方形图片被挤压了，文本也自动换行了。

当文本内容和图片没有一行占满，图片展示正常。

如果图片和文本超过一行怎么让图片展示正常尺寸？

解决：给文本的View 设置flex：1，这个时候是图片去挤压文本，超过一行，文本自动换行。