react-native AutoComplete 文本输入
IT技术
javascript
reactjs
react-native
2021-05-20 02:45:17
1个回答
好的,根据您提供给我们的少量信息,我尝试制作一个快速示例(根本没有设计),您可以在此处找到
我让你做造型。
从 JSON 文件中读取数据:检查这个
代码如下:
'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);