Question

我正在尝试根据prop中传递的值来更改组件的不透明度。这是我的代码：

class Sourate extends React.Component{

    render(){
        let opacity = this.props.bookmarkOpacity;
        return(   
            <View style={styles.sourate}>
                <View style={{flexDirection:'row'}}>
                <Text style={styles.sourateNum}>{this.props.sourateNumber}.</Text>
                <Text style={styles.enName}>{this.props.sourateNammeEN}</Text>
            </View> 
            <Image source={require('../Resources/bookmark.png')}
                style={{ 
                    height: 30,
                    width: 25,
                    margin:15,
                    tintColor:"#d24141",
                    opacity:{opacity},
                }} 
            />
            <Text style={styles.arName}>{this.props.sourateNameAR}</Text>
        );
    };
  }

<Sourate 
    sourateNameAR={souratesData[i].ArName}
    sourateNammeEN={souratesData[i].EnName}
    sourateNumber={souratesData[i].SourateNumber}
    SouratePage= {souratesData[i].pageNum} 
    bookmarkOpacity={0.0}
/>

我得到一个红色屏幕，上面显示“更新由RTCImageView管理的视图的属性'opacity'时出错不透明度的值不能从ReadableNativeMap强制转换为Double”

Answer 1

您正在传递对象{opacity}。您的Sourate组件应显示为：

class Sourate extends React.Component{

    render(){
      let opacity = this.props.bookmarkOpacity;
      return(

        <View style={styles.sourate}>
          <View style={{flexDirection:'row'}}>
            <Text style={styles.sourateNum}>{this.props.sourateNumber}.</Text>
            <Text style={styles.enName}>{this.props.sourateNammeEN}</Text>
          </View>

          <Image source={require('../Resources/bookmark.png')}
                 style={{height: 30,
                         width: 25,
                         margin:15,
                         tintColor:"#d24141",
                         opacity, // <----- CHANGED HERE!
                         }}

无法使用组件道具将不透明度值传递给图像样式

1 个答案: