将本机滚动反应到平面列表顶部 onChangeText答案

【问题标题】：React native scroll to top of flatlist onChangeText将本机滚动反应到平面列表顶部 onChangeText
【发布时间】：2020-12-09 05:47:52
【问题描述】：

我目前有一个搜索栏组件，当我搜索任何文本时，它会呈现一个平面列表。

我的问题是，例如，我搜索足球，平面列表呈现所有足球帖子，我可以向下滚动查看所有帖子。如果我滚动到平面列表的中间然后决定搜索篮球，平面列表会呈现篮球帖子，但它不是从列表顶部开始，而是从它在足球搜索时停止的相同位置开始。

当搜索 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} />

【问题讨论】：

你能给我一个小吃网址吗？
@J.Doe 我以前从未使用过零食，如果您需要更多我的代码，请告诉我，并将添加到上面的问题中。
您可以粘贴您的代码here，按保存并分享网址。

标签： react-native

【解决方案1】：

很遗憾，我没有运行您的零食，有一些缺失的部分，但您可以执行以下操作：

为 FlatList 声明 ref 变量

const ref = React.useRef();
在 FlatList 组件中传递它

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

在updateSearch函数中，如果文本为空，可以手动滚动到顶部。

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

附：这只是一个解决方法。

【讨论】：

这不起作用，我想要的是每当文本更改时我搜索栏我滚动到平面列表的顶部。在您的解决方案中，它仅在搜索为空时才有效，而不是在搜索发生任何更改时才有效
@kd12345 你的意思是每次你打字的时候？
没错，只要我在搜索栏中输入内容
然后删除 if 语句。
是的，我打算写信试试scrollToOffset。我不知道scrollToIndex 出了什么问题，也许它与您的数组有关。它们都是一种使用索引/偏移量滚动到某个位置的方法。 scrollToOffset({ 偏移量: 0 });在您的情况下，计算距顶部（y 轴）的距离，零表示每次滚动到顶部。