如何使用React Native处理无显示并阻止View组件

Question

在我的场景中，有两个视图。 当加载组件时，我需要没有第二个视图，而单击TextInput之后需要从第二个视图中选择值后打开第二个视图。在关闭第二个视图之后，应该在第一个视图TextInput中填充所选值。我可以实现使用react.js具有相同的效果，但是使用react native无法实现相同的效果。

var ViewDisplay = React.createClass({
   componentDidMount(){
       this.refs.secondView.getDOMNode().style.display="none";
   },
   clickHandler:function(){
         this.refs.secondView.getDOMNode().style.display="block";
   },
   populateValue:function(){
        this.refs.secondView.getDOMNode().style.display="none"; 
   },
   render:function(){
     return(<View>           
             <View  ref={firstView}>
                      <TextInput style={styles.textInput} placeholder=  {enter value} onEndEditing={this.clickHandler}/>
             </View>
            <View ref={secondView}>
               <TouchableHighlight underlayColor="#ffa456" onPress={this.populateValue}> 
                    <Text ref={key}>first</Text>
              </TouchableHighlight>
              <TouchableHighlight  underlayColor="#ffa456" onPress={this.populatevalue}>   
                 <Text>Second</Text>
              </TouchableHighlight>
              <TouchableHighlight  underlayColor="#ffa456" onPress={this.populatevalue}>  
                 <Text>third</Text>
             </TouchableHighlight>
           </View>
       </View>)
    }
})

Answer 1

尝试使用点击处理程序在组件状态中设置一个标志，然后使用该标志确定应呈现哪个视图

render() !this.state.clicked ? <View ref={firstView}> ... </View> : <View ref={secondView}> ... </View>