按 React Native 更改矢量图标

Question

我有一个名为 ChecklistCard.js 的卡片组件。我的目标是将按下时 CheckboxPlaceholder 中的羽化图标从“正方形”更改为“检查正方形”，并更改图标的颜色。这是我已经拥有的。

const ChecklistCard = ({ title, description, icon }) => {

  return (
    <TouchableOpacity >
      <ChecklistCardContainer>
        <IconBox iconName={icon} />
        <MiddleContainer>
          <Title>{title}</Title>
          <Description>{description}</Description>
        </MiddleContainer>
        <CheckboxContainer>
          <CheckboxPlaceholder>
            <Feather name={'square'} size={iconSize.lg} color={'black'} />
          </CheckboxPlaceholder>
        </CheckboxContainer>
      </ChecklistCardContainer>
    </TouchableOpacity>
  )
};


export default ChecklistCard

Answer 1

你可以试试这段代码:

const ChecklistCard = ({ title, description, icon }) => {

  let [typeIcon,setType] = useState ('square')

  return (
    <TouchableOpacity onClick={()=>{
      if(typeIcon==='square'){
        setType('check-square')
      }else{
        setType('square')
      }
    }} >
      <ChecklistCardContainer>
        <IconBox iconName={icon} />
        <MiddleContainer>
          <Title>{title}</Title>
          <Description>{description}</Description>
        </MiddleContainer>
        <CheckboxContainer>
          <CheckboxPlaceholder>
            <Feather name={typeIcon} size={iconSize.lg} color={'black'} />
          </CheckboxPlaceholder>
        </CheckboxContainer>
      </ChecklistCardContainer>
    </TouchableOpacity>
  )
};


export default ChecklistCard