Reactjs 响应本机搜索并滚动到hit

我需要一些帮助来实现搜索和滚动，以点击反应本机。做了很多搜索，结果发现了一些死胡同（找到了一些

refs

examples，我无法开始工作）

尝试构建此代码段作为开始：

import React，{Component}来自'React'；
从“react native”导入{Text，View，ScrollView，TextInput，StyleSheet}；
导出默认类应用程序扩展组件{
状态={
正文：“41”
}
render（）{
返回(
this.setState（{text}）}
值={this.state.text}
/>
{[…数组（100）].map（（{，i）=>{return{i}}）
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
paddingTop:10，
背景颜色：“#ecf0f1”，
},
第段：{
差额：10，
尺码：18，
fontWeight:'粗体'，
textAlign:'中心'，
颜色：“#34495e”，
},
});

任何帮助开始将不胜感激

我的猜测是：

您可以从绑定您的

的

ref

开始

然后可以设置一个

submit（）

函数

所述函数可以使用
try
catch
语句找到等于
this.state.text
的
ref
，以确保边缘情况下的正常故障

如有发现,；目标
x
和
y
偏移量可以使用

然后可以调用
scrollTo（）
滚动到目标组件

// Scroll To Query.
submit = () => {

  try {

    const { text } = this.state // Text.
    const target = this[text] // Target.

    // Locate Target.
    target.measure((framex, framey, width, height, x, y) => {

      // Scroll To Target.
      this.ScrollView.scrollTo({x, y, animated: true})
    })

  } catch (error) {

    return console.log(error)
  }

}

台阶
使用
onLayout
记住每个项目的位置
scrollTo（）
文本输入时的位置，并且仅当找到项时
代码
const styles=StyleSheet.create({
文本输入：{
边框底部颜色：“紫色”，
textAlign:'中心'，
边界宽度：2，
身高：40，
玛金托普：20，
},
正文：{
textAlign:'中心'，
尺寸：16，
差额：10，
} 
});
导出类应用程序扩展组件{
数据=[]；
datapos={}；
scrollref=null；
建造师（道具）{
超级（道具）；
///制作100个示例数据
对于（var i=0；i
this.scrollref=ref}
>
{
this.data.map（（数据）=>(
this.datapos[data]=layout.nativeEvent.layout.y}
>{data}
))
}
)
}
}

结果:
首先，我强烈建议您使用
FlatList
而不是
ScrollView
。这有几个原因：

FlatList
与ScrollView相比具有更优化的性能（在scroll view中，所有项目一次呈现，无论它们是否在屏幕上可见）
此外，在
FlatList
中，滚动和渲染项的处理要简单得多，您不需要了解任何关于x、y轴和像素的信息，只需使用索引即可
为了全面比较这两种方法，您可以查看：


现在回到你的问题，正如我所说的，我建议你使用平面列表，然后一切都会像蛋糕一样简单。
您可以在以下位置找到您的世博会的修改示例：


您需要在代码中进行的更改包括：

不使用ScrollView，而是使用FlatList，因此更改此选项：

{this.flatListRef=ref；}
数据={新数组（100）.fill（0）.map（（项，索引）=>index）}
renderItem={（{item}）=>(
{item}
)}
/>

如果您还不熟悉
FlatList
，您需要知道，数据是作为数组添加到
data
prop中的（我添加了一个100个数字的数组），它的呈现方式是作为
renderItem
prop添加到
FlatList
（我添加了与您相同样式的文本）

此外，请注意，您不需要将ref传递给
，因为
FlatList
已经知道它包含的项目。您只需向
FlatList
本身添加一个ref：

 ref={ref => {this.flatListRef = ref;}}

现在，当您想要创建和滚动时，您可以简单地调用
FlatList
的
scrollToIndex
方法，例如编写一个名为
scrollHandler
的方法：

 // Scroll to Query
  scrollHandler = (itemIndex)=>{
    this.flatListRef.scrollToIndex({animated: true, index: itemIndex});
  }

请注意，
flatListRef
是分配给
FlatList
的ref的名称

现在，当您想要执行滚动动作时，只需调用此方法即可。例如，将文本输入修改为：

<TextInput
        style={{height: 60, borderColor: 'gray', borderWidth: 1, 
                borderRadius: 10, margin: 5, padding:30, color: 'black', }}
        onChangeText={(text) => this.setState({text})}
        value={this.state.text}
        onSubmitEditing={()=>this.scrollHandler(this.state.text)}
/>

this.setState（{text}）}
值={this.state.text}
onSubmitEditing={（）=>this.scrollHandler（this.state.text）}
/>
非常感谢您的回答。尝试过www.snack.expo.io/@norfeldt/搜索并滚动到，但无法完全实现。有时它会滚动（到可见的组件），但大多数情况下什么也不会发生。对我来说很好。你在输入数字吗？你的答案很好，正好回答了我的问题。我的问题是，我认为我有不同高度的项目（知道我的例子没有），但它不起作用-看，有几个因素与我有关：1-为什么你的列表中应该包含不同高度的项目？这是一种糟糕的用户体验设计实践，因为在智能手机的小屏幕上，用户通常不会期望出现这种行为，它要么是一张特定卡片的列表，要么最好根本不列出。2-如果在任何情况下，您的列表包含不同高度的项，最好不要使用scrollToIndex和scrollToItem，这两种方法的API仍然是实验性的，在复杂的情况下有几个错误。我在讨论这个案例的帖子中添加了一个PS。我知道使用不同的高度是不好的做法。但我'；我正在解析一些json内容，这些内容需要采用不同的格式（并创建不同的高度）
 ref={ref => {this.flatListRef = ref;}}

 // Scroll to Query
  scrollHandler = (itemIndex)=>{
    this.flatListRef.scrollToIndex({animated: true, index: itemIndex});
  }

<TextInput
        style={{height: 60, borderColor: 'gray', borderWidth: 1, 
                borderRadius: 10, margin: 5, padding:30, color: 'black', }}
        onChangeText={(text) => this.setState({text})}
        value={this.state.text}
        onSubmitEditing={()=>this.scrollHandler(this.state.text)}
/>