隐藏/显示在 react -native on press答案

【问题标题】：Hide / show in react -native on press隐藏/显示在 react -native on press
【发布时间】：2023-04-08 06:46:01
【问题描述】：

我在 react-native 有工具栏，像这样

当点击搜索图标时，我需要像这样打开输入文本

我为此尝试了很多示例，但我无法为我的案例申请任何人，有什么帮助吗？？？

这是我的代码：

constructor(props, context) {
  super(props, context);
  const ds = new ListView.DataSource({
    rowHasChanged: (r1, r2) => r1 !== r2
  });
    this.state = {
    visible: false,
       selectedTab: 'view1',

     ds:[{CustomerName: "Customer Name", CustomerPhone: "+564659878964"},{CustomerName: "Customer Name", CustomerPhone: "+564659878964"},{CustomerName: "Customer Name", CustomerPhone: "+564659878964"},{CustomerName: "Customer Name", CustomerPhone: "+564659878964"},{CustomerName: "Customer Name", CustomerPhone: "+564659878964"},{CustomerName: "Customer Name", CustomerPhone: "+564659878964"},{CustomerName: "Customer Name", CustomerPhone: "+564659878964"},{CustomerName: "Customer Name", CustomerPhone: "+564659878964"},{CustomerName: "Customer Name", CustomerPhone: "+564659878964"}],
     dataSource:ds,
    }


}
       <TouchableHighlight 
onPress={()=>this.toggleStatus()}>
  <Image style={styles.imagestyle}
  source={require('./ic_search.png')} />
    </TouchableHighlight>
  <Text style={styles.toolbarTitle}>CUSTOMERS</Text>
  <TouchableHighlight onPress={() => this.moveToAddNewCustomer()}>
  <Image style={styles.imagestyle}
                  visible={this.state.visible}

  source={require('./ic_action_name.png')} />
    </TouchableHighlight>


    </View>

如何隐藏标题并打开输入文本???

【问题讨论】：

标签： android reactjs react-native

【解决方案1】：

如果导航栏可以访问visible 状态，那么您应该能够只使用if 语句来确定要显示的状态

if (this.state.visible) {
  return (
    <SearchBar />
  )
} else {
  return (
    <Title />
  )
}

【讨论】：