react-native - 如何将 CustomButton 组件传递给 createAnimatedComponent?
问题描述
我正在尝试制作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"
}
});
提前致谢。
解决方案
在@Jaydeep Galani 的提示后,我检查了 CustomButton 中的样式,并进行了以下更改,现在按钮的标题动画了。谢谢杰迪普!
<Text style={[ styles.text, {color: this.props.color} ]}>
{this.props.title}
</Text>
这是最后的更改,因此 backgroundColor 也可以工作。
export default class CustomButton extends React.Component {
render() {
return (
<TouchableWithoutFeedback
onPress={this.props.onPress}
>
<View
onPress={this.props.onPress}
style={[ styles.buttonStyle, {backgroundColor: this.props.backgroundColor}] }
>
<Text style={[ styles.text, {color: this.props.color} ]}>
{this.props.title}
</Text>
</View>
</TouchableWithoutFeedback>
);
}
}
render() {
const animatedColor = this.state.animation.interpolate({
inputRange: [0, 1],
outputRange: ["white", "black"]
});
const animatedBackgroundColor = this.state.animation.interpolate({
inputRange: [0, 1],
outputRange: ["tomato", "lightblue"]
});
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}
backgroundColor={animatedBackgroundColor}
// textStyle={animatedColor}
/>
</View>
);
}
推荐阅读
- javascript - 如何在 Gutenberg wordpress 中调试块?
- c++ - OpenMP 中的默认调度(gcc 编译器)
- javascript - filterRangeInPlace(arr, a, b) 获取数组 arr 并从中删除除 a 和 b 之间的值之外的所有值
- c - 从 python ctypes 访问引用的 C 结构字符串
- regex - OCaml`Str`模块的正则表达式匹配的奇怪结果
- python - 删除数字和总和python之间的空格的最佳方法
? - css - 当用户在页面上处于活动状态时,如何继续显示链接元素的边框底部
- sql - SQL查询以获取在层次结构中较高的所有记录的列表
- networking - 如何在 ns-3 中使用具有模拟网络和节点的真实应用程序?
- html - 在 Angular 中将用于拖放的光标更改为 nonDragZone 或 DraggableZone