React Native-使用过渡填充背景色

Question

我认为我会相应地用背景色填充它。例如，如果用户从五个组件中选择一项，则我的视图必须用颜色填充20％。 我已经正确地用颜色填充了视图。但是由于我无法使用过渡属性，因此无法通过过渡获得颜色填充，因此看起来就像逐渐填充。如何为视图设置动画，使其具有平滑的色彩填充效果？

我的代码

<View style={{backgroundColor: 'green', opacity: 0.6, height: '100%', position: 'absolute',width: (selectedList.length === 0 ? 0 
: selectedList.length === 1 ? '20%' : selectedList.length === 2 ? '40%' :selectedList.length === 3 ? '60%' : selectedList.length === 4 ? '80%' : selectedList.length === 5 ? '100%' : 0)
            }}>
</View>

Answer 1

您可能想使用React Native中的Animated。 https://facebook.github.io/react-native/docs/animations。将百分比值存储在状态中的变量中，然后可以对20％执行以下操作，诸如此类：

Animated.timing(this.state.percentageFilled, {
  toValue: 20,
  duration: 1000,
}).start();