如何使用react native处理视图组件的无显示和块显示

How to handle display none and block for a View component using react native

本文关键字：显示 组件 视图 何使用 react native 处理      更新时间：2023-09-26

在我的场景中有两种视图。当加载组件时，我不需要在点击后查看第二个视图在TextInput上，需要在选择值后打开第二个视图从第二个视图中选择的值应该填充在第一个视图中查看第二次之后的TextInput应关闭view。我能成功使用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>)
    }
})

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

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