React Native 滚动到目标元素

Question

我是React Native的新手。我在最新的函数组件中创建了一个简单的应用程序。

我想要在左侧屏幕图标上实现onPress右侧滚动到该元素，这是屏幕上的两个兄弟，您可以将其命名为左侧屏幕和右侧屏幕，左侧屏幕使用style={{flex:1}}，右侧屏幕使用style={{flex:2}}

左侧屏幕有一个包含5个元素的列表，而右侧屏幕具有所有5个元素，每个列表中都有7个项目，并带有react-native的scroll view中的标题。

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

  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 并将引用（ref）传递到滚动视图，但对我来说没有起作用，或者可能我使用的方法不正确。

任何有关博客、文章或解决方案的参考资料都将不胜感激！ 图片参考在此处..

参考图片

- vibhu

Answer 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({animated: true, index}); }; ;

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

1. DummyData
2. LeftSide（目前我只提供了6个项目的列表以符合您的设计。建议左侧也使用FlatList / ScrollView，因为列表会增长）
3. RightSide（目前每个元素有8个项目，可以添加更多）
4. ScrollToIndex

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

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

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

- Gavin D'mello