12345678_0001
2023-04-27 15:15:35
我在功能組件內(nèi)的應(yīng)用程序中使用來自 react-native-elements 的 SearchBar。但是有一個問題我無法解決:我只能一個一個地輸入字符。我不能連續(xù)在我的欄中寫我的文字然后搜索。相反,我必須一個一個地輸入每個字符才能找到一個特定的詞。這是我的代碼: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> ); }
1 回答

慕娘9325324
TA貢獻(xiàn)1783條經(jīng)驗 獲得超4個贊
我試過你的代碼,它似乎SearchBar與FlatList. 您遇到的問題是,由于某種原因,您正在失去輸入焦點,因為您正在將其“注入”SearchBar到FlatList. 所以我所做的就是將權(quán)利SearchBar放入代碼中,如下所示:
<FlatList
? data={institutions}
? keyExtractor={(item, index) => index.toString()}
? refreshing={refresh}
? onRefresh={() => onRefresh()}
? ListHeaderComponent={
? ? <SearchBar
? ? lightTheme
? ? clearIcon
? ? onChangeText={handleSearch}
? ? value={value}
? ? placeholder='Buscar...' />
? }
/>
它奏效了,您現(xiàn)在可以繼續(xù)寫作而不會失去焦點。FlatList這不是一個糟糕的解決方案,它是一個簡單的解決方案,但如果這不是您喜歡的,您應(yīng)該嘗試找到如何將任何組件插入函數(shù)或 const 的標(biāo)頭中。
添加回答
舉報
0/150
提交
取消