【问题标题】: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>
  );
};

【讨论】:

【解决方案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

【讨论】:

    猜你喜欢
    • 2019-02-17
    • 1970-01-01
    • 2020-05-13
    • 2019-06-14
    • 2020-08-18
    • 2019-03-25
    • 2017-08-14
    • 2017-06-16
    • 2015-12-03
    相关资源
    最近更新 更多