React Native：单击按钮时呈现组件

Question

我有一个要在用户单击按钮时呈现的组件列表。该屏幕应该是一个搜索屏幕，用户可以在其中输入查询内容，当他们点击搜索按钮时，就会显示结果列表。但是，当我尝试使用 onPress 进行组件渲染时，没有任何反应。对于这个例子，我只是打印文本而不是使用地图来打印组件。

renderResults() {  
   return <Text> Doesn't get printed </Text>
  }

  render() {
    return (
      <View>
        <Button
          onPress={ this.renderResults.bind(this) } //use .bind(this) to access state in renderResults
          title="Search!"
          color="#841584" />
       </View>
      );
  }

Answer 1

export default class App extends Component {
    state={
      isVisible:false
    }

    renderResults=() =>{ 
      this.setState({
        isVisible:!this.state.isVisible//toggles the visibilty of the text
      })
    } 

    render() { 
      return (
        <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
          {this.state.isVisible?<Text> get printed </Text>:null}
          <Button onPress={ this.renderResults} 
            title="Search!" 
            color="#841584" /> 
      </View> 
      );
     }
}

试试这个代码。

你可以在链接上运行演示