键入后，FlatList 中的 SearchBar 失去焦点

Question

我正在通过道具使用SearchBar组件并根据搜索值过滤项目列表。问题是，在输入一个字符后，搜索栏失去焦点（键盘被移除）——这几乎就像组件重新渲染一样？我在这里缺少什么？FlastListListHeaderComponent

我使用的是Android的，如果我移动不发生问题SearchBar的外部FlatList。

import React from 'react'
import {FlatList, View} from 'react-native'
import { ListItem, SearchBar } from 'react-native-elements'

export const Component = (props) => {
  const [search, setSearch] = React.useState('');
  const [items, setItems] = React.useState([
    { id: 1, name: 'One Thousand' },
    { id: 2, name: 'Two Hundred' },
  ]);

  const filterItems = (items, filter) => {
    return items.filter(item => item.name.toLowerCase().includes(filter.toLowerCase()))
  }

  const renderHeader = () => (
    <SearchBar
      placeholder='Search...'
      onChangeText={setSearch}
      value={search}
    />
  );

  const renderItem = ({ item }) => (
    <ListItem
      title={item.name}
      bottomDivider
      chevron
    />
  );

  return (
    <FlatList
      data={filterItems(items, search)}
      keyExtractor={item => item.id.toString()}
      renderItem={renderItem}
      ListHeaderComponent={renderHeader}
      stickyHeaderIndices={[0]}
    />
  )
}

Answer 1

为了轻松解决这个问题，尽量不要使用单独的组件渲染ListHeaderComponent，而是直接使用render

   <FlatList
      ...
      ListHeaderComponent={
        <Searchbar
          placeholder="Search"
          onChangeText={query => {
            setSearch(query);
          }}
          value={search}
        />
      }
    />