reactjs - react 原生切换组件没有状态

Question

我只想切换 SearchButton 和 SearchIcon ，我使用以下代码

  searchBarButton() {
    Actions.refresh();
    this.setState({ showSearchBar: !this.state.showSearchBar });
  }

 render() {
    if (this.state.showSearchBar) {
      return (
        <Header>
          <View style={styles.searchHolder}>
            <Item style={styles.searchBar}>
              <Icon name="ios-search" />
              <Input placeholder="Search" />
            </Item>
            <Button style={styles.searchButton} onPress={this.searchBarButton}>
              <Text>Search</Text>
            </Button>
          </View>
        </Header>
      );
    }
    return (
      <Header>
            <Button onPress={() => this.searchBarButton()} transparent>
              <Icon name="search" style={styles.bigblue} />
            </Button>
      </Header>
    );
  }

所以基本上最初速度非常快，但是当我的场景包含平面列表中的大量项目时，切换之间大约有 1 到 2 秒的延迟。我猜这是由于重新渲染页面中的所有项目所致。

那么如何以更简单、更高效的方式切换此功能，而无需在不使用状态的情况下重新渲染整个页面

Answer 1

我认为你必须使用 style 属性隐藏其中一个。

先渲染两者，然后将其中一个切换为隐藏(通过使用状态)，

<Header>
  <View style={[this.state.showSearchBar && styles.hidden]}>Button</View>
  <View style=[{!this.state.showSearchBar && styles.hidden}]>Icon</View>
</Header>

不要将它们完全从虚拟dom中删除(我不知道在移动设备中如何调用它)