如何在 react-native 中使用 datalist答案

【问题标题】：How to use datalist in react-native如何在 react-native 中使用 datalist
【发布时间】：2021-07-05 06:54:54
【问题描述】：

如何在 react-native 中使用 datalist。我想在带有 fetch api 的 react native 中使用 datalist。我使用 laravel 作为后端，所以我想在 react native datalist 中获取数据

【问题讨论】：

React Native 中有多种列表类型。 ScrollView、FlatList、SectionList……你应该先检查你想要哪个数据列表。
我需要文本输入，我可以在其中写入，用户在输入数据时会看到一个预定义选项的下拉列表

标签： react-native datalist

【解决方案1】：

在 react-native 中使用 Flatlist 来显示动态数据

import React, { useEffect, useState } from 'react';
import { ActivityIndicator, FlatList, Text, View } from 'react-native';

export default App = () => {
  const [isLoading, setLoading] = useState(true);
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://reactnative.dev/movies.json')
      .then((response) => response.json())
      .then((json) => setData(json.movies))
      .catch((error) => console.error(error))
      .finally(() => setLoading(false));
  }, []);

  return (
    <View style={{ flex: 1, padding: 24 }}>
      {isLoading ? <ActivityIndicator/> : (
        <FlatList
          data={data}
          keyExtractor={({ id }, index) => id}
          renderItem={({ item }) => (
            <Text>{item.title}, {item.releaseYear}</Text>
          )}
        />
      )}
    </View>
  );
};

【讨论】：

我需要那个东西来反应原生w3schools.com/tags/tag_datalist.asp

【解决方案2】：

使用react-native-autocomplete-input

$ npm install --save react-native-autocomplete-input

render() {
  const { query } = this.state;
  const data = filterData(query);
  return (
    <Autocomplete
      data={data}
      value={query}
      onChangeText={(text) => this.setState({ query: text })}
      flatListProps={{
        keyExtractor: (_, idx) => idx,
        renderItem: ({ item }) => <Text>{item}</Text>,
      }}
    />
  );
}

react-native-autocomplete-input

【讨论】：