React Native scrollTo 目标元素答案

【问题标题】：React Native scrollTo target elementReact Native scrollTo 目标元素
【发布时间】：2021-07-24 16:46:05
【问题描述】：

我是 React Native 的新手。我在功能组件中使用最新版本制作了一个简单的应用程序。

我正在尝试在leftside 图标onPress 右侧滚动到该元素，这是屏幕中的两个兄弟，您可以使用左侧屏幕和右侧屏幕命名它左侧屏幕style={{flex:1}} and rightside style={{flex:2}}

left side 有一个 5 elements 和 right side 屏幕列表，所有 5 个元素在每个列表中有 7 个项目，标题在 react-native 的滚动视图中。

我想当用户点击左侧屏幕图标右侧屏幕滚动到标题位置或类似的东西。该应用程序类似于当用户单击一个项目时，它会滚动到屏幕上的该项目。我查看了许多无法实现我想要实现的教程。

  function leftside(){
<TouchableOpacity style={styles.left_container} onPress={itemA}>
        <MaterialCommunityIcons
      name={"itesname"}
      size={35}
      color={"#000"}
    />
    <Text>Item</Text>
  </TouchableOpacity>
 <TouchableOpacity>
 ... till 5
 </TouchableOpacity>
  }

右侧：

   import React from "react";
   import { Text, View, Image } from "react-native";

   function rightside({ uri, text }) {
    return (
<View style={{ flexDirection: "column", backgroundColor: "#fff" }}>
  <View
    style={{
      justifyContent: "center",
      alignItems: "center",
      paddingLeft: "5%",
    }}
  >
    <Image
      source={{
        uri,
      }}
      style={{ width: 60, height: 80 }}
    />
    <Text>{text}</Text>
  </View>
</View>
   );
  }

  export default rightside;

我尝试useRef 并将引用传递给滚动视图对我不起作用，或者我可能以错误的方式接近它。

对任何博客、帖子或解决方案的任何引用都表示赞赏。！图片参考这里..

image for refrence

【问题讨论】：

标签： reactjs react-native use-ref

【解决方案1】：

您正在寻找的解决方案可以使用Flatlist实现

 <FlatList
     ref={ref => {
         this.flatListRef = ref;
     }}
     data={MainResults}
     renderItem={({item, index}) => this._renderItemRight(item, index)}
     keyExtractor={({id}) => id.toString()}
/>

要滚动到特定索引，该项目的索引如下所示：

scrollToIndex = index => { this.flatListRef.scrollToIndex({动画：真，索引}); }; ;

为了解决您的问题，我创建了整个功能，包括：

虚拟数据
LeftSide（目前我刚刚提供了一个包含 6 个项目的列表来满足您的设计。我建议在左侧使用 FlatList/ScrollView 以及列表增长 )
RightSide（目前每个元素有 8 个 item，可以添加更多）
ScrollToIndex

为了更好地了解解决方案，请查看此gist

注意：整个实现是按照问题中提供的这个设计（image for reference）构建的。

如果您觉得有帮助，请标记我的解决方案。干杯！

【讨论】：