React Native 下拉搜索字段

在 React Native 中，我们可以使用 TextInput 组件来实现一个下拉搜索字段。它包含一个文本输入框和一个下拉菜单，当用户输入文字时，下拉菜单会自动匹配相关内容并显示。

创建 TextInput 组件

首先，我们需要创建一个 TextInput 组件，并设置其样式和 props：

import React, { useState } from 'react';
import { View, TextInput, StyleSheet } from 'react-native';

const SearchField = () => {
  const [query, setQuery] = useState('');

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Search"
        onChangeText={text => setQuery(text)}
        value={query}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  input: {
    width: 300,
    height: 40,
    borderRadius: 5,
    borderWidth: 1,
    padding: 10,
  },
});

export default SearchField;

在上面的代码中，我们创建了一个名为 SearchField 的组件。它包含一个 TextInput 组件、一个名为 query 的状态变量，以及一个设置状态变量的函数 setQuery。我们将这个状态变量作为 TextInput 组件的值（value prop）传递，这样用户输入的内容就可以动态更新。

同时，我们还可以添加一些样式，比如设置 width、height 和 borderRadius 等属性，让搜索框更加美观。

创建下拉菜单

接下来，我们需要实现一个下拉菜单（又称自动完成框），用于匹配用户输入的文字。我们可以使用 FlatList 组件来实现。

import React, { useState } from 'react';
import { View, TextInput, StyleSheet, FlatList } from 'react-native';

const SearchField = () => {
  const [query, setQuery] = useState('');
  const [data, setData] = useState([
    { id: 1, title: 'Apple' },
    { id: 2, title: 'Banana' },
    { id: 3, title: 'Cherry' },
    { id: 4, title: 'Durian' },
    { id: 5, title: 'Eggplant' },
  ]);

  const renderItem = ({ item }) => {
    return (
      <View style={styles.item}>
        <Text>{item.title}</Text>
      </View>
    );
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Search"
        onChangeText={text => setQuery(text)}
        value={query}
      />
      {query.length > 0 && (
        <FlatList
          data={data.filter(item => item.title.includes(query))}
          renderItem={renderItem}
          keyExtractor={item => item.id}
        />
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  input: {
    width: 300,
    height: 40,
    borderRadius: 5,
    borderWidth: 1,
    padding: 10,
  },
  item: {
    padding: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
  },
});

export default SearchField;

在上面的代码中，我们为 SearchField 组件添加了一个名为 data 的状态变量，用于存储下拉菜单中的数据。同时，我们也实现了 renderItem 函数来渲染每个下拉菜单项。

最后，我们在 TextInput 组件下方判断当前输入的文本非空时，显示 FlatList 组件，并传递相应的 data、renderItem 和 keyExtractor 等参数。

总结

通过上述代码示例，我们可以看到如何在 React Native 中实现一个下拉搜索字段。其中，我们使用 TextInput 和 FlatList 组件来分别实现文本输入框和下拉菜单，并通过状态变量存储输入的文本和下拉菜单的数据。这里只是一个简单的示例，根据需求可以进行更加自定义的修改。