react native TextInput 结合 FlatList的简单用法

 目前手机混合框架可谓百花齐放，各有千秋。这里主要简单展示了react native TextInput的主要用法，以及简单结合FlatList的用法

源代码如下：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React ,{ Component } from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  FlatList,
  Text,
  TextInput,
  StatusBar,
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

class myapp extends Component {
  constructor(props){
    super(props);
    
       this.state={
          value:''
       }
      
    }
  
  render() {
    return (
         
          <View style={styles.body}>
              <Text style={{color:'#00f', marginLeft: 5,marginTop: 10}}>
                 请输入关键字
              </Text>
              <TextInput style={styles.input}  onChangeText={this.getValue.bind(this)} value={this.state.value} clearButtonMode='while-editing'/>
              {
                this.state.show? 
                <FlatList
                  data={[{key: 'a', goods: 'banner'}, {key: 'b', goods: 'apple'}]}
                  renderItem={({item}) => <View style={styles.con}><Text style={styles.text} onPress={this.hide.bind(this,item.goods)}>{item.goods}</Text></View>}
                  ItemSeparatorComponent={ this._renderItemSeparatorComponent }
                />
                :null
              }
          </View>
        
    );
  }

   _renderItemSeparatorComponent = () => (
      <View style={{ height:1, backgroundColor:'#c2c3c4' }}></View>
  );
  getValue(text){
    console.info(text);
    this.setState({
      show:true,
      value:text
    });
  }

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

const styles = StyleSheet.create({
  

  body: {
    marginTop: 50,
    backgroundColor: Colors.white,
  },
  input:{
    height: 50,
    borderWidth: 1,
    margin: 5,
    paddingLeft: 5,
    borderColor: '#ccc',
    borderRadius: 4
  },
  result:{
    marginTop: 1,
    marginLeft: 5,
    height: 200,
    borderColor: '#ccc',
    borderTopWidth: 1
  },
  item:{
    height: 50,
    textAlign:'center'
  },
  con: {
        height: 26,
        flexDirection: 'column',
        justifyContent: 'center'
    },
    text: {
      marginLeft: 10,
      fontSize: 20
    }
});

export default myapp;