Question

在此文件中，我有一个通过prop接收的十六进制颜色，十六进制代码为'＃BE2625'。在其中可以正确显示，但是当我将其应用于backgroundColor时，则不会显示颜色，而是向我抛出警告

警告：道具类型失败：提供给视图的道具'backgroundcolor'无效：'＃BE2625'有效颜色格式为.......

import React from 'react';
import {StyleSheet, View, Text} from 'react-native'


export default class Color extends React.Component {

  
  render() {

    const {Color} = this.props;
    
    return (
   <View style={[styles.bodyColor, {backgroundColor: `'${Color}'` }]}>
    <Text style={styles.hex}>  {Color} </Text>
    </View>
    );
  }
}


const styles = StyleSheet.create({
    bodyColor :{
        height:50,
        margin:10,
       
        
    },

    hex :{
        textAlign:'center',
        fontSize: 22,
        padding:10
    }
})

Answer 1

您的颜色字符串中有多余的'个字符：

<View style={[styles.bodyColor, {backgroundColor: `'${Color}'` }]}>
                                                   ^
                                                   this one here

您应该删除它们并使用：

<View style={[styles.bodyColor, {backgroundColor: `${Color}` }]}>

警告：道具类型失败：提供给视图的道具'backgroundcolor'无效：

1 个答案: