例如,我有一个城镇列表。我需要创建像 这样
如何创建(针对Android和IOS)?我应该将其存储在哪里?
好的,因此,根据您提供给我们的少量信息,我尝试制作一个简单的示例(完全没有设计),您可以在此处找到
我让你做造型。
从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);