У меня есть компонент кнопки с текстом и значком на нем. Кнопка и значок из собственной базовой библиотеки... Как я могу изменить значок (свойства имени значка) после нажатия кнопки
фрагмент кода:
<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>
Вы можете добиться этого, изменив состояние после нажатия кнопки:
Рабочая демонстрация: 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>
);
}
}
Надеюсь, это работает!
Вы можете попробовать это:
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>
);
}
}
Надеюсь, это поможет.
У меня была такая же проблема, вот как я решил ее, используя состояние и условные операторы 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>
);
}
