react-native - 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。将百分比值存储在 state 中的变量中，然后您可以对 20% 执行类似的操作，依此类推：

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