【taro】--------------taro学习笔录{taro的不一样（一）}-------------【劉】

 

（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能够，小程序不支持，由于小程序是模板化的）