css - 在 native react 中顺利增加高度？

Question

我正在看这个零食:https://snack.expo.io/SJzzaNaQN下面是我期望它可以通过缓动平稳增加高度但没有成功的代码:

Animated.timing(this.anim, {
 toValue: fill,
 duration: 2000,
 easing: Easing.linear
}).start();

帮助？

Answer 1

这是我修改过的代码

 import React, { Component } from 'react';
    import { Animated, Text, TextInput, View, StyleSheet, Easing } from 'react-native';

    class CircleFillable extends Component {
      anim = new Animated.Value(this.props.fill)

      componentDidUpdate(propsOld) {
        const { fill } = this.props;
        const { fill:fillOld } = propsOld;

        if (fill !== fillOld) {
          Animated.timing(this.anim, { 
            toValue:fill, 
            duration:1000, 
            easing: 
            Easing.linear 
            }).start();
        }
      }
      render() {
        const fillAnim = this.anim.interpolate({ 
          inputRange:[0, 100], 
          outputRange:['0%', '100%'],
          extrapolate:'clamp'
          });



        return (
          <View style={styles.circle}>
            <Animated.View style={[styles.circleFill,{height:fillAnim}]} />
          </View>
        )
      }
    }

    export default class App extends Component {
      state = {
       text: '25'
      }
      render() {

        const { text } = this.state;
        let fillAsNumber = Math.min(text, 100);
        if (Number.isNaN(fillAsNumber)) fillAsNumber = 0;

        return (
          <View style={styles.container}>
            <CircleFillable fill={fillAsNumber} />
            <Text style={{ marginTop:32 }}>Change fill to:</Text>
            <TextInput onChangeText={text => this.setState({ text })} value={text} style={{ width:64, height:48, textAlign:'center' }}/>
          </View>
        );
      }
    }

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        alignItems: 'center',
        marginTop: 64
      },
      circle: {
        width: 196,
        height: 196,
        borderRadius: 196 / 2,
        borderWidth: 2,
        borderColor: '#000000',
        overflow: 'hidden'
      },
      circleFill: {
        backgroundColor: 'orange',
        width: '100%',
        bottom: 0,
        position: 'absolute'
      }
    });