单击 onPress 按钮后如何更改按钮上的图标（图标名称属性）

Question

我有带有文本和图标的 Button 组件。来自本机库的按钮和图标... 单击按钮后如何更改图标（图标名称属性）

代码片段：

<Button
    onPress={}
    transparent
    iconRight
    small   
 >
  <Text style={{ color: 'red', fontSize: 18 }}>HIDE</Text>
   <Icon
     name='ios-arrow-down-outline'
     style={{ color: 'red', fontSize: 18 }} 
    />
   </Button>

Answer 1

你可以试试这个：

        const defaultImage = require('../images/defaultImage.png');
        const changedImage = require('../images/changedImage.png');   
        class ChangeImage extends Component {
          constructor() {
            super();
            this.state = { showDefaultImage: true };
          }

          renderImage() = {
           const imgSrc = this.state.showDefaultImage? defaultImage : changedImage;
            return (
              <Image
                source={ imgSrc }
              />
            );
          }
          render(){
            return (
              <View>
                  <TouchableOpacity
                   onPress={ () => this.setState(
                   { showDefaultImage: !this.state.showDefaultImage }
                )} 
                  />
                    {this.renderImage()}
                  </TouchableOpacity>
                </View>
            );
          }
        }

希望这会有所帮助。

Answer 2

你可以通过改变按下按钮后的状态来实现：

工作演示：https://snack.expo.io/r1dHpDBvX

示例代码：

import React, { Component } from 'react';
import { Container, Header, Content, Button, Text, Icon } from 'native-base';

export default class ButtonThemeExample extends Component {
  constructor() {
   super();
   this.state = { iconName: "md-arrow-back" };
  }

  render() {
    return (
     <Container>
       <Header />
         <Content>
           <Button
             onPress={ () => this.setState(
               { iconName: "md-arrow-down" }
             )}
             transparent
             iconRight
             small   
            >
            <Text style={{ color: 'red', fontSize: 18 }}>HIDE</Text>
            <Icon
              name= {this.state.iconName}
              style={{ color: 'red', fontSize: 18 }} 
            />
          </Button>
        </Content>
      </Container>
     );
    }
  }

希望这有效！

Answer 3

我遇到了同样的问题，这就是我使用状态和条件语句 onPress 解决它的方法：

function ListItem({title, description, status, onPress, onCheck}){  

  
     // Declare a new state variable, which we'll call "count"
     // Declare a new state variable, which we'll call "count"
  const [iconName, setIconName] = useState("checkbox-blank-circle");
   
    return(  
        <View style={styles.container}>
            <TouchableHighlight onPress={onPress} underlayColor={colors.dark}>
            <Icon name="menu" style={styles.icon} color="#333" background="#fff" />
            </TouchableHighlight>
            <View style={styles.column}>
            <AppText style={styles.title}>{title}</AppText>
            <AppText style={styles.description}>{description}</AppText>
            </View>
            <TouchableOpacity onPress={() => {
              if(iconName == "checkbox-blank-circle" ){
              setIconName("checkbox-marked-circle")
              }
              if(iconName == "checkbox-marked-circle"){
                setIconName("checkbox-blank-circle")
              }
            }
            }> 
            <Icon name={iconName} style={styles.icon} color="#999" background="#fff" />
            </TouchableOpacity>
        </View>
      
    );
}

单击 onPress 按钮后如何更改按钮上的图标（图标名称属性）

How to change icon(icon name properties) on button after clicking on button that is onPress

react-native

native-base