ReactNative Demo -SearchInput

  import React, {
    Component
  } from 'react';
  import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    ListView,
    PixelRatio,
    TextInput,
    TouchableHighlight,
    TouchableOpacity,
    TouchableWithoutFeedback,
  } from 'react-native';

  var onePT = 1 / PixelRatio.get();
  class AwesomeProject extends Component {


    render() {



      return (
       
        
          
        
          
      );


    }
  }



 class Search extends Component{
   //show button this.state
   //view 显示的值

   constructor(props) {
     super(props);
     this.state={
       show: false,
       value: null,
     };
   }

   hide(val){
     this.setState(
       {
         show:false,
         value:val,
       }
     );
   }

   getValue(text) {
     this.setState(
       {
         show:true,
         value:text,
       }
     );
   }


   showalert(text) {
     alert(text);
   }
   
   render(){
      return(
        
          
            
            
            
             
              搜索
            
          
          {this.state.show ?
            
               {this.state.value}张传伟QQ
               {this.state.value}大神
               {this.state.value}工程师
               {this.state.value}小王子
            
            :null

          }

          
            
              zcw qq [email protected]
            

            
              作者：zcwfeng
            

            
              作者：zcwfeng123
            
           
        
        
        );
    }
 }




  const styles = StyleSheet.create({
    flex: {
      flex:1,
    },

    
    flexDirection :{
      flexDirection:'row',
    },

    topStatus : {
      marginTop : 25,
    } ,

    input:{
      height:45,
      borderColor:'red',
      borderWidth: 1,
      marginLeft:10,
      
      borderRadius:5,
      paddingLeft:10,
    },
    
    btn:{
      height:45,
      width:45,
      marginLeft:-5,
      marginRight:5,
      backgroundColor:'#23BEFF',
      alignItems:'center', 
      justifyContent:'center',
      
    },
    search:{
      color:'#fff',
      fontWeight:'bold',
      fontSize:15,
    },
    result:{
      marginTop:onePT,
      marginLeft:18,
      marginRight:5,
      height:200,

    },
    item:{
    fontSize:16,
    paddingTop:5,
    paddingBottom:10,
    },

  });
  
 

  AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

转载请注明出处:http://www.jianshu.com/u/c864df301e25