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

我认为你必须使用dx = Y[0] - X[0]; dy = Y[1] - X[1]; dz = Y[2] - X[2]; X+=3;道具隐藏其中一个。

首先渲染两者，将其中一个切换为隐藏（通过使用状态），

style

不要将它们从虚拟dom中删除（我不知道在移动设备中应该怎么称呼它）

Answer 2

我建议你抓一些UI库。看看这个：https://react-bootstrap.github.io/components.html#utilities

您可以在此

中搜索您的搜索栏代码

    <Collapse in={this.state.showSearchBar}>
      ...
    </Collapse>

所有事情都得到了非常有效的处理。

您只需在操作员{!showSearhBar && <Component/>}

中拖动按钮即可

还可以使用react dev tools来检查重新呈现的内容

没有状态

2 个答案: