React-Native踩坑記錄二

1.Image組件的borderRadius畫圓有平台兼容性問題，在IOS下會失效

解決方法有幾種

(1)在外面包裹一層View,對View組件使用borderRadius就可以了，這是我的做法

(2)在同一級屬性塊下加上overflow: 'hidden'，我沒試過，大家可以閱讀下面的鏈接

https://www.jianshu.com/p/d237f0258418

2.React-Native的漸變實現方案

(1) 使用react-native-linear-gradient：https://github.com/react-native-community/react-native-linear-gradient

(2) 讓設計直接提供漸變的背景圖片，簡單粗暴

3.React-Native的陰影實現方案

（1）借助react-native-shadow模塊實現（需要引入其他原生代碼）

（2）借助react-native-shadow-card模塊實現（不需要引入其他原生代碼）

（3）自己實現，通過shadowOpacity等原生屬性單獨實現對IOS的兼容，通過elevation屬性單獨實現對Android的兼容，實際上這也是react-native-shadow-card的做法

（4）讓設計直接提供陰影的背景圖片，簡單粗暴

4.Animated插值的用法

插值映射的時候，outputRange可以是一個 “數字 + 特殊字符”的形式，例如

outputRange: ['0%', '100%']

或者

outputRange: ['0deg', '100deg']

或者

width: this.state.progress.interpolate({

  inputRange: [0, 1],

  outputRange: ['0%', '100%']

})

 

 

 

 

 

5.RN動畫三板斧

第一步：初始化動畫值

this .state = {

   progress:  new  Animated.Value( 0 )

};

 

 

 

第二步：改變動畫值

Animated.timing( this .state.progress, {

       toValue: endRatio,

       duration:  800 ,

       easing: Easing.inOut(Easing.ease)

       // easing: Easing.linear()

     }).start();

 

 

 

 

 

第三步：取值放進Animated.View中（必須用Animated下的組件）

const localStyle = {

      width: this.state.progress.interpolate({

        inputRange: [0, 1],

        outputRange: ['0%', '100%']

      })

};

return

 

 

 

 

 

 

 

6.style對象的格式

style對象不一定強制要求用StyleSheet.create包裹，普通的對象字面量也可以寫入組件的style屬性當中

7. fontWeight的取值

可以控制字體粗細，取值有“normal”,"bold","100" ~ "900",其中 “400”是正常，“700”是"bold" 

{

   fontWeight:  "100"

}

 

 

8.Image的長度最好不要使用比例

Image的長度定義最好使用固定的px，如果使用比例控制長度的話，會遇到不太好處理的情況

 

9. 自定義彈框實現方案

選用生態：react-native-root-siblings

原理：重寫AppRegistry.registerComponent，然后插入元素