失敗道具類型：無效的道具`opacity`型`object`提供給`RCTView`

Question

的

我下面從陣營本土教程： https://facebook.github.io/react-native/docs/animated.html

但是，我得到了以下警告，當我跑我的代碼： 失敗道具類型：提供給RCTView

和組件只是消失object型的無效的道具opacity沒有動畫時淡出（）得到調用。

這裏是一個示例代碼：

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> 
    ); 
    } 
...... 
} 

Answer 1

。在你的代碼中的問題：

圖標標籤不能在animcation使用，等反應過來本地投訴。

取而代之，您應該將圖標換成以下兩種圖標之一：TouchableHighlight，TouchableNativeFeedback，TouchableOpacity，TouchableWithoutFeedback，無論哪一個都適用。

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

並綁定屬性可觸摸*，而不是圖標。

Answer 2

使用背景顏色的阿爾法值代替嘗試的不透明度。

<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}} /> 
 
    ... 
 
)

Answer 3

您應該將視圖更改爲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。