如何在 react-native 中使用 datalist

问题描述

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

中获取数据

解决方法

在 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>
  );
};

,

使用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