React Native 钱包账户列表页 - 带搜索功能

下面是一个使用React Native编写的钱包账户列表页的示例代码，包含一个搜索框来实现账户的搜索展示：\n\njavascript\nimport React, { useState } from 'react';\nimport { View, TextInput, FlatList, Text } from 'react-native';\n\nconst AccountList = () => {\n const [searchText, setSearchText] = useState('');\n const [accounts, setAccounts] = useState([\n { id: 1, name: 'Account 1' },\n { id: 2, name: 'Account 2' },\n { id: 3, name: 'Account 3' },\n { id: 4, name: 'Account 4' },\n ]);\n\n const handleSearch = (text) => {\n setSearchText(text);\n // 根据搜索文本过滤账户列表\n const filteredAccounts = accounts.filter((account) =>\n account.name.toLowerCase().includes(text.toLowerCase())\n );\n setFilteredAccounts(filteredAccounts);\n };\n\n const renderItem = ({ item }) => (\n <Text>{item.name}</Text>\n );\n\n return (\n <View>\n <TextInput\n style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 10 }}\n placeholder="Search"\n onChangeText={handleSearch}\n value={searchText}\n />\n <FlatList\n data={filteredAccounts}\n renderItem={renderItem}\n keyExtractor={(item) => item.id.toString()}\n />\n </View>\n );\n};\n\nexport default AccountList;\n\n\n在上面的代码中，我们使用了useState来保存搜索文本和账户列表。handleSearch函数用于更新搜索文本并根据搜索文本过滤账户列表。renderItem函数用于渲染账户列表中的每个项。\n\n最后，我们在return语句中使用TextInput来显示搜索框，根据输入的搜索文本调用handleSearch函数。使用FlatList来显示过滤后的账户列表。