Reactnative 我将如何根据百分比为按钮的宽度设置动画，并且它的背景 colored颜色 也是如此

我建议你阅读更多关于interpolation的内容，因为它在用React Native制作几乎任何类型的动画时都非常有用.

基本上，使用interpolate可以将一些动画值映射到其他值.在本例中，您希望将40-interpolate之间的数字映射为50%之类的百分比字符串.第二件事是将40-interpolate之间的数字映射为红色到蓝色(例如).

全面阅读interpolate docs并进行实验，然后询问是否有问题:)

所以我会这样做:

class AnimatedButton extends Component {
  constructor(props) {
    super(props);
    this.state = { width: new Animated.Value(100) };
  }

  toggleWidth() {
    const endWidth = this.props.isFullWidth ? 40 : 100;

    Animated.timing(this.state.width, {
      toValue: endWidth,
      duration: 200,
      easing: Easing.linear,
    }).start();
  }

  render() {
    <TouchableOpacity
      style={{
        width: this.state.width.interpolate({
          inputRange: [0, 1],
          outputRange: ['0%', '100%'],
        }),
        backgroundColor: this.state.width.interpolate({
          inputRange: [40, 100],
          outputRange: ['rgba(30, 70, 30, 1.0)', 'rgba(220, 100, 50, 0.8)'],
        }),
      }}
      onPress={this.props.onPress}
    >
      // more stuff
    </TouchableOpacity>;
  }
}