मेरे पास वर्तमान में एक खोज बार घटक है जो किसी भी पाठ की खोज करते समय एक फ्लैटलिस्ट प्रस्तुत करता है।
मेरी समस्या उदाहरण के लिए है, मैंने फ़ुटबॉल की खोज की, फ़्लैटलिस्ट सभी फ़ुटबॉल पोस्ट को प्रस्तुत करता है जिसे मैं सभी को देखने के लिए नीचे स्क्रॉल कर सकता हूं। अगर मैं फ़्लैटलिस्ट के बीच में स्क्रॉल करता हूं तो बास्केटबॉल की खोज करने का निर्णय लेता हूं, फ़्लैटलिस्ट बास्केटबॉल पोस्ट को प्रस्तुत करता है लेकिन यह सूची के शीर्ष से शुरू नहीं होता है, यह उसी स्थिति से शुरू होता है जो फुटबॉल खोज पर रुक गया था।
जब मैं खोज स्क्रॉल के onChangeText या कोई वैकल्पिक समाधान करता हूं तो मैं कैसे कार्यान्वित करूं?
यहाँ मेरा कोड है:
const [search, setSearch] = useState("");
const updateSearch=(search)=>{
setSearch(search);
}
useEffect(() => {
if(page>0)
loadPosts(search,page);
}, [page,search]);
<SearchBar
placeholder="Search"
onChangeText={updateSearch}
value={search}
autoFocus = {true}
onClear={()=>setPage(0)}
/>
<FlatList
data={search===""? emptyList:filteredList} />
1 उत्तर
दुर्भाग्य से, मैंने आपका नाश्ता नहीं चलाया, कुछ हिस्से गायब हैं लेकिन आप निम्न कार्य कर सकते हैं:
FlatList के लिए रेफरी चर घोषित करें
const ref = React.useRef();
इसे FlatList घटक में पास करें
<FlatList ref={ref} ... />
अपडेटसर्च फ़ंक्शन के अंदर, यदि टेक्स्ट खाली है, तो आप मैन्युअल रूप से शीर्ष पर स्क्रॉल कर सकते हैं।
const updateSearch = (search) => { ref.current.scrollToIndex({ index: 0 }); setSearch(search); }
पी.एस. यह सिर्फ एक समाधान है।
संबंधित सवाल
जुड़े हुए प्रश्न
नए सवाल
react-native
React native एक जावास्क्रिप्ट लाइब्रेरी है, जिसका उपयोग React का उपयोग करके देशी मोबाइल ऐप बनाने के लिए किया जाता है। रिएक्ट नेटिव का फोकस उन सभी प्लेटफार्मों पर डेवलपर दक्षता पर है जिनकी आप परवाह करते हैं - एक बार सीखें, कहीं भी लिखें।