natywne wejście Autouzupełnianie tekstu wejściowego

Question

Na przykład mam listę miast. Muszę stworzyć coś w rodzaju: this

Jak go utworzyć (dla systemu Android i iOS)? I gdzie powinienem go przechowywać?

Answer 1

OK, więc na podstawie małego informacji dałeś nam, starałem się zrobić szybki przykład (bez projektowania w ogóle), które można znaleźć here

dam ci zrobić stylizację.

Odczyt danych z pliku syna sprawdzić this

kodu jest następujący:

'use strict'; 

var React = require('react-native'); 
var { 
    AppRegistry, 
    Component, 
    StyleSheet, 
    Text, 
    TextInput, 
    ListView, 
    View, 
} = React; 

var adresses = [ 
    { 
    street: "1 Martin Place", 
     city: "Sydney", 
    country: "Australia" 
    },{ 
    street: "1 Martin Street", 
     city: "Sydney", 
    country: "Australia" 
    } 
]; 

var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 

class SampleApp extends Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     searchedAdresses: [] 
    }; 
    }; 

    searchedAdresses = (searchedText) => { 
    var searchedAdresses = adresses.filter(function(adress) { 
     return adress.street.toLowerCase().indexOf(searchedText.toLowerCase()) > -1; 
    }); 
    this.setState({searchedAdresses: searchedAdresses}); 
    }; 

    renderAdress = (adress) => { 
    return (
     <View> 
     <Text>{adress.street}, {adress.city}, {adress.country}</Text> 
     </View> 
    ); 
    }; 
    render() { 
    return (
     <View style={styles.container}> 
     <TextInput 
      style={styles.textinput} 
      onChangeText={this.searchedAdresses} 
      placeholder="Type your adress here" /> 
     <ListView 
        dataSource={ds.cloneWithRows(this.state.searchedAdresses)} 
      renderRow={this.renderAdress} /> 
     </View> 
    ); 
    }; 
} 

var styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#FFFFFF', 
    }, 
    textinput: { 
    marginTop: 30, 
    backgroundColor: '#DDDDDD', 
    height: 40, 
    width: 200 
    } 
}); 

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