0

CustomButtonアニメイトやってみます!と を使用createAnimatedComponentrefます。ボタンは表示されるが、アニメーションが機能しない! CustomButtonからのアニメーションの色がcreateAnimatedComponent表示されなかった場合に備えて、色をコメントアウトしようとしましたが、何もありませんでした。

どんな助けでも大歓迎です。

CustomCreateAnimatedComp.js

const AnimatedButton = Animated.createAnimatedComponent(CustomButton);

export default class CustomCreateAnimatedComp extends Component {
  state = {
    animation: new Animated.Value(0)
  };
  // for the ref button
  // Here our customButton gets detected by animated,
  // and we forward the setNativeProps to native button
  setNativeProps = props => {
    this.button.setNativeProps(props);
  };

  startAnimation = () => {
    Animated.timing(this.state.animation, {
      toValue: 1,
      duration: 1500
    }).start(() => {
      Animated.timing(this.state.animation, {
        toValue: 0,
        duration: 300
      }).start();
    });
  };

  render() {
    const animatedColor = this.state.animation.interpolate({
      inputRange: [0, 1],
      outputRange: [["white", "black"]
    });

    return (
      <View style={styles.container}>
        {/* Animated works also on props (like color) not only styles */}
        <AnimatedButton
          ref={(ref) => (this.button = ref)}
          title="Press Me"
          onPress={this.startAnimation}
          color={animatedColor}
        />
      </View>
    );
  }
}

CutomButton.js

export default class CustomButton extends React.Component {
  render() {
    return (
      <TouchableWithoutFeedback
        onPress={this.props.onPress}
        style={{ ...this.props.touchableStyle }}
      >
        <View
          onPress={this.props.onPress}
          style={{ ...styles.buttonStyle, ...this.props.style }}
        >
          <Text style={{ ...styles.text, ...this.props.textStyle }}>
            {this.props.title}
          </Text>
        </View>
      </TouchableWithoutFeedback>
    );
  }
}

const styles = StyleSheet.create({
  buttonStyle: {
    marginVertical: 5,
    paddingBottom: 3,
    borderRadius: 15,
    alignSelf: "center",
    backgroundColor: "tomato",
    elevation: 7
  },
  text: {
    color: "white",
    textAlign: "center"
  }
});

前もって感謝します。

4

1 に答える 1