如何使用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>