Question

我正在关注React Native教程： https://facebook.github.io/react-native/docs/animated.html

但是，当我运行代码时，我收到以下警告：失败的道具类型：提供给opacity的{{1}}类型的道具object无效

当调用fade（）时，组件就会在没有动画的情况下消失。

这是一个示例代码：

RCTView

Answer 1

您应该将视图更改为Animated.View。然后，您可以选择添加fadeAnim的插值，以实现更精细的控制。

这样的事情应该有用......

render() {
    const { fadeAnim } = this.state;

    // optionally tweak the input / output range to suit your needs
    const opacity = fadeAnim.interpolate({
      inputRange: [0, 1],
      outputRange: [0, 1]
    });

    return (
      <Animated.View style={[styles.container, opacity]}>
        <TouchableHighlight onPress={() => {this.fade()}}>
          <Icon name="circle" size={30} color="#fff"
          >
        </TouchableHighlight>
      </Animated.View>
    );
  }

您可能不想淡化容器视图，在这种情况下将Animated.View移动到Touchable中。

Answer 2

使用背景颜色的alpha值尝试不透明度。

<Icon name="circle" size={30} color="#fff" style={{opacity: fadeAnim}} />

到

＆＃13;

...
let faceRgb = 'rgba(0,0,0,' + faceAnim + ' )';

return (
  ...
  <Icon name="circle" size={30} color="#fff" style={{backgroundColor: faceRgb}} />
  ...
)

＆＃13;

Answer 3

您的代码中存在问题：

图标标签不能用于动画，因此请回复本机投诉。

相反，你应该用以下两种方式包装Icon：TouchableHighlight，TouchableNativeFeedback，TouchableOpacity，TouchableWithoutFeedback，无论哪种方法都有效。

https://facebook.github.io/react-native/docs/touchablewithoutfeedback.html

将属性绑定到Touchable *而不是Icon。

失败的道具类型：提供给`RCTView`的`object`类型的无效道具'opacity`

3 个答案: