我正在关注React Native教程:https://facebook.github.io/react-native/docs/animated.html
但是,当我运行我的代码时,我收到以下警告:失败的道具类型:提供给 RCTView
的类型 object
的无效道具 opacity
当调用fade()时,组件就会在没有动画的情况下消失 .
这是一个示例代码:
import React, { Component } from 'react';
import {
AppRegistry,
Text,
View,
Animated,
StyleSheet
} from 'react-native';
import Icon from 'react-native-vector-icon/FontAwesome'
export default class Sample extends Component {
state = {
fadeAnim: new Animated.Value(0),
}
fade() {
Animated.timing( // Animate over time
this.state.fadeAnim, // The animated value to drive
{
toValue: 1, // Animate to opacity: 1 (opaque)
duration: 10000, // Make it take a while
}
).start(); // Starts the animation
}
render() {
let { fadeAnim } = this.state;
return (
<View style={styles.container}>
<TouchableHighlight onPress={() => {this.fade()}}>
<Icon name="circle" size={30} color="#fff" style={{opacity: fadeAnim}}
>
</TouchableHighlight>
</View>
);
}
......
}
3 回答
您的代码中存在问题:
图标标签不能用于animcation,因此反应原生投诉 .
相反,你应该用以下两种方式包装Icon:TouchableHighlight,TouchableNativeFeedback,TouchableOpacity,TouchableWithoutFeedback,无论哪种方法都有效 .
https://facebook.github.io/react-native/docs/touchablewithoutfeedback.html
并将属性绑定到Touchable *而不是Icon .
您应该将视图更改为Animated.View . 然后,您可以选择添加
fadeAnim
的插值以进行更细粒度的控制 .像这样的东西应该工作......
您可能不想淡化容器视图,在这种情况下将Animated.View移动到Touchable中 .
尝试使用背景颜色的alpha值代替不透明度 .
<Icon name="circle" size={30} color="#fff" style={{opacity: fadeAnim}} />
至