【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能夠，小程序不支持，由於小程序是模板化的）