来自带有 FlatList 的 react-native-elements 的 SearchBar

Question

我在功能组件内的应用程序中使用来自 react-native-elements 的 SearchBar。但是有一个问题我无法解决：我只能一个一个地输入字符。我不能连续在我的栏中写我的文字然后搜索。相反，我必须一个一个地输入每个字符才能找到一个特定的词。这是我的代码：export default function InstitutionsScreen({navigation}) {  const [institutions, setInstitutions] = useState('');  const [refresh, setRefresh] = useState(false);  const [fullData, setFullData] = useState([]);  const [value, setValue] = useState('');  useEffect(() => {    if(!institutions) {      setRefresh(false);      getInstitutions();    }  }, []);  const contains = (institutionName, query) => {    if (institutionName.includes(query)) {      return true    }    return false  }  const handleSearch = text => {    setValue(text);    const formattedQuery = text.toLowerCase()    console.log("flaco me diste " + formattedQuery)    const data = filter(fullData, inst => {      return contains(inst.name.toLowerCase(), formattedQuery)    })    setInstitutions(data);  }  const onRefresh = () => {    setRefresh(true);    getInstitutions();  };  const renderHeader = () => (    <View      >        <SearchBar        lightTheme        clearIcon        onChangeText={(text) => handleSearch(text)}        value={value}        placeholder='Buscar...' />    </View>  )  if (!institutions || refresh) {    return (      <ScrollView contentContainerStyle={{alignItems: "center", flex: 1, justifyContent: 'center'}}>        <Spinner isVisible={true} size={100} type={'Pulse'} color={'#013773'}/>      </ScrollView>    );  } 

Answer 1

我试过你的代码，它似乎SearchBar与FlatList. 您遇到的问题是，由于某种原因，您正在失去输入焦点，因为您正在将其“注入”SearchBar到FlatList. 所以我所做的就是将权利SearchBar放入代码中，如下所示：

<FlatList

  data={institutions}

  keyExtractor={(item, index) => index.toString()}

  refreshing={refresh}

  onRefresh={() => onRefresh()}

  ListHeaderComponent={

    <SearchBar

    lightTheme

    clearIcon

    onChangeText={handleSearch}

    value={value}

    placeholder='Buscar...' />

  }

/>

它奏效了，您现在可以继续写作而不会失去焦点。FlatList这不是一个糟糕的解决方案，它是一个简单的解决方案，但如果这不是您喜欢的，您应该尝试找到如何将任何组件插入函数或 const 的标头中。