taro--------------taro学习笔录{taro的不同}-------------劉

Posted 2022-02-06 lstcon

 

（1）（H5中）taro设置元素高度不继承外部高度100%

　　　taro自带元素设置过高度100%，但是通过自己书写元素的高度100%不继承。还是内部元素撑起来的高度。

　　解决方法：为自己的元素最外层的父元素设置position:absolute; || position:flxed;将元素的参考定义到body身上。则以body进行参考设置。可以撑起来高度100%。

 

（2）像素的写法

　　像素书写用小写的px书写则自动回转换成rem进行自适配。

　　运用大写的PX书写则不会转换。

 

（3）类名书写

　　taro是一套遵循 React 语法规范的多端开发解决方案，所以开发的时候离不了组件的思想由于编译成 h5 时，一个页面上的众多组件在 h5 中，整体渲染在一个大的 html 文件里面，最终同属于一个页面，因此各个组件里面的样式名称，即className，即使没有相互引用，因为渲染成一个页面的原因，也是会相互影响的，因此各个组件的样式名称不要出现重复相同的命名。

 

（4）taro进行RN开发的时需要注意的地方：

　　React Native 动画不支持：Animation 和 transform

　　React Native 与 H5/小程序 的 Flex 布局相关属性的默认值有差异

　　React Native 中的View设置flex布局时，方向默认为纵向；所以在进行开发的时候要明确flex的方向

　　React Native 中由于Swiper需要有高度，所以使用Swiper组件时必须指定高度，否则RN编译会报错。

　　React Native 中由于Text组件在RN上默认都是块组件，而小程序和h5默认都为行内元素，所以为了兼容样式，使用的时候注意强调布局;并且字体样式不能写到View组件上。只能写到Text组件上，不然RN不支持

　　React Native 中当文字过多以省略号显示的时候，因为RN不支持，所以不能直接采用css样式text-overflow:ellipsis;进行处理。否则打包到RN中会报错。所以要运用sass书写css样式进行统一的适配

　　

@mixin text-ellipsis() 
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

　　同样的如果要进行换行处理也要运用sass的写法

@mixin lamp-clamp($line) 
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $line;
  -webkit-box-orient: vertical;

　　React Native 进行选择器使用的时候：

　　1. 基本选择器只支持类选择器；

　　2. 不支持组合选择器的写法；

　　3. 不支持伪类及伪元素

 

（5）使用props 需要设置默认值

　　

1 XXX.defaultProps = 
2    changeInput:null
3 

（6）引入组件

　　组件名需与文件名相同，否则报错

 

（7）引入函数

　　引入的函数不能直接在子组件中用箭头函数调用，需要在子组件中单独写个函数，调用props上的函数

 

（8）map的使用

　　map 不能放在 render 之外（h5可以，小程序不支持，因为小程序是模板化的）