平面列表搜索栏不保留键盘 React Native

Question

我正在从 API 获取数据并在 FlatList 中实现搜索，但每次按键后键盘都会自动关闭。 我引用了这篇文章，但在功能组件中实现了它。

const renderHeader = () => {
return <SearchBar 
placeholder="Type Here..." 
lightTheme 
round
onChangeText={text => searchFilterFunction(text)}
value={value}
autoCorrect={false} />;
}
const searchFilterFunction = (text) => {
setValue(text);
const newData = APIData.filter(item => {
const itemData = `${item.name.toUpperCase()}`;
const textData = text.toUpperCase();
return itemData.includes(textData);
});
setData(newData);
}
return (
<FlatList
keyExtractor={(item) => item._id}
data={data}
ItemSeparatorComponent={renderSeparator}
ListHeaderComponent={renderHeader}
ListFooterComponent={renderFooter}
onRefresh={handleRefresh}
refreshing={refreshing}
renderItem={({ item }) => (
<Card>
<Card.Content style={{ flexDirection: "row" }}>
<Text>{"Name: " + item.name}</Text>
<Text>{"Status: " + (item.isaccepted ? "Accepted" : "Pending")}</Text>
<Text>{"ID: " + item.id}</Text>
</Card.Content>
</Card>
)} />
)

提前谢谢。

Answer 1

我在做同样的事情，将搜索栏作为标题添加到 FlatList。不幸的是，当您在搜索筛选完成时更新平面列表数据时，这也会更新标题，从而将焦点集中在 SearchBar 之外。最后，由于时间限制，我最终将SearchBar放在FlatList的顶部。

Answer 2

尝试直接将 ListHeaderComponent 渲染为 JSX 元素，而不是使用回调

<FlatList
ListHeaderComponent={
<View>
<Text>I am the header</Text>
</View>
}
...props
/>