Question

在标题中，我添加了左侧组件-图标，并且我想在单击时设置图标。我该怎么办？

我试图设置状态值并返回依赖于该值的组件。

<Header
            placement="left"
            leftComponent={  
              <Icon 
                name='keyboard-arrow-left'
                color='#ffffff'
                size={40}
                onPress={}
              />
            }
            centerComponent={<Text>User Info</Text>}
          />

Answer 1

您可以为图标创建单独的组件

export class MyIcon extends Component {
  state = { name: 'keyboard-arrow-left' }

  render() {
    return (
      <Icon 
        name={this.state.name}
        color='#ffffff'
        size={40}
        onPress={() => this.setState({ name: 'close' })}
      />
    );
  }
}

并将此组件用于您leftComponent中的Header

<Header
  placement="left"
  leftComponent={  
    <MyIcon/>
  }
  centerComponent={<Text>User Info</Text>}
/>

Answer 2

解决此问题的最简单方法是添加对Icon组件的引用。然后使用该引用来更改图标的任何道具。

constructor(props){
    super(props);
    this.state = {};
    this.myIcon = ''; 
}

updateIconName = (nameEntered) => {
    this.myIcon.name = nameEntered;
}

render() {
    return(
        <View style={{flex: 1}}>
            <Header
                placement="left"
                leftComponent={  
                    <Icon 
                        name='keyboard-arrow-left'
                        color='#ffffff'
                        size={40}
                        onPress={this.updateIconName}
                        ref={(element) => {this.myIcon = element;}}
                    />
                }
                centerComponent={<Text>User Info</Text>}
            />
        </View>
    );
}

如何在点击时设置图标名称

2 个答案: