>source

현재 텍스트를 검색 할 때 플랫리스트를 렌더링하는 검색 창 구성 요소가 있습니다.

내 문제는 예를 들어 축구를 검색했는데 플랫리스트가 모든 축구 게시물을 렌더링하여 아래로 스크롤하여 모두 볼 수 있다는 것입니다. 플랫리스트의 중간으로 스크롤 한 다음 농구를 검색하기로 결정하면 플랫리스트는 농구 포스트를 렌더링하지만 목록의 맨 위에서 시작하지 않고 축구 검색에서 멈춘 위치에서 시작합니다.

검색 scrollToTop의 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에 대한 ref 변수 선언

    const ref = React.useRef();

    FlatList 구성 요소에 전달

    <FlatList ref={ref} ... />

    내부updateSearch텍스트가 비어 있으면 수동으로 맨 위로 스크롤 할 수 있습니다.

    const updateSearch = (search) => {
       ref.current.scrollToIndex({ index: 0 });
       setSearch(search);
    }
    
    

    추신 이것은 단지해결 방법.

관련 자료

  • 이전 sql - 케이스 (그 외의 경우)
  • 다음 Python의 DataFrame에서 그래프/관계 기반 값 매핑