CustomButton
アニメイトやってみます!と を使用createAnimatedComponent
しref
ます。ボタンは表示されるが、アニメーションが機能しない! 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"
}
});
前もって感謝します。