TextInput组件

Question

在这里输入图像描述

https://i.stack.imgur.com/AEGy7.png --我有一个TextInput组件--如何编写内容，它表示输入F时作为图像突出显示的下一个单词，并自动将b.com加黑

Answer 1

您可以有一个包含应用程序中常用关键字的列表，如下所示：

[
   {
       "id": 1,
       "name": "chicken",
   }
   {
       "id": 2,
       "name": "banana",
   }
]

请注意，理想情况下，您将从API获取这些数据，而不是自己手动添加数据。然后，创建一个简单的搜索栏，并使用useState声明一个新变量：

const [filter, setFilter] = useState([])

...

<TextInput style={styles.textinput} placeholder='Search food...' onChangeText={handleChange}/>

handleChange函数负责设置新的数据过滤器：

const handleChange = (e) => {

        const currentFilter = data.filter((item) => {

            return item.name.toLowerCase().includes(e.toLowerCase())
        })

        setFilter(currentFilter)
    }

要显示所需的数据，可以使用条件渲染。只需在要显示数据的视图中插入以下代码段：

{

                filter.length != 0 && (

                    <View>

                        {
                            filter.map((item, key) => {
                                return <Text key={item.id} style={styles.textstyle}>{item.name}</Text>
                            })
                        }

                    </View>
                )

            }

以下是完整的代码：

export default function FilteringTest() {

    const [filter, setFilter] = useState([])

    const handleChange = (e) => {

        const currentFilter = data.filter((item) => {

            return item.name.toLowerCase().includes(e.toLowerCase())
        })

        setFilter(currentFilter)
    }

    return (

        <View style={styles.background}>

            <TextInput style={styles.textinput} placeholder='Search food...' onChangeText={handleChange} />

            {

                filter.length != 0 && (

                    <View>

                        {
                            filter.map((item, key) => {
                                return <Text key={item.id} style={styles.textstyle}>{item.name}</Text>
                            })
                        }

                    </View>
                )

            }

        </View>
    )
}

至于突出显示这些值，您只需在searchBar上创建一个包含最接近匹配的新文本。我建议您阅读这篇关于react本机数据过滤的文章：https://www.freecodecamp.org/news/how-to-make-a-filter-component-in-react/

Answer 2

TextInput for IOS - https://snack.expo.dev/JrWw1Zj5Z

TextInput for android - https://snack.expo.dev/piRXBQv6aM

要获得更好的视图，可以禁用TextInput上的边框或使TextInput透明，并将边框和其他样式设置为文本组件。