React-Native自动完成文本输入框

Question

例如，我有一个城镇列表。 我需要创建类似于这样的东西。

如何创建它（适用于Android和IOS）？ 我应该把它存储在哪里？

- zlFast

---

我们需要更多信息来帮助您。您是否将数据存储在本地？还是通过请求获取数据？也许可以发布一些代码，这样我们就可以看到您的问题所在。 - G. Hamaide

我的数据存储在 JSON 文件中。 - zlFast

Answer 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);

- G. Hamaide

---

感谢您提供的解决方案！ - mvdb

不再可用。 - Gp2mv3

链接已损坏。 - Dhrumil Shah - dhuma1981

@Gp2mv3 我把代码放在了一个 Snack 上：https://snack.expo.io/@niklasro/readjson - Niklas Rosencrantz

ListView已被弃用。有其他选项可用以实现此目的。 - Prabhu Visu