失败的道具类型：提供给“RCTView”的“对象”类型的无效道具“不透明度”答案

【问题标题】：Failed prop type: Invalid prop `opacity` of type `object` supplied to `RCTView`失败的道具类型：提供给“RCTView”的“对象”类型的无效道具“不透明度”
【发布时间】：2017-08-08 11:38:50
【问题描述】：

我正在关注以下 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>
    );
  }
......
}

【问题讨论】：

标签： reactjs react-native

【解决方案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 内。

【讨论】：

【解决方案2】：

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

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

到

...
let faceRgb = 'rgba(0,0,0,' + faceAnim + ' )';

return (
  ...
  <Icon name="circle" size={30} color="#fff" style={{backgroundColor: faceRgb}} />
  ...
)

【讨论】：

【解决方案3】：

你的代码有问题：

图标标签不能用于动画，所以反应原生抱怨。

相反，您应该使用以下任何一种来包装图标：TouchableHighlight、TouchableNativeFeedback、TouchableOpacity、TouchableWithoutFeedback，无论哪个有效。

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

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

【讨论】：