React native 带有ScrollTo的平面列表在React Native中

我是React Native的新手，我正在尝试在Expo的应用程序中创建一个平面列表，该应用程序将从Json中提取一些类别的产品，我成功地创建了平面列表，还创建了一个用于测试的Json模拟，但是我希望通过单击平面列表中的任何项目，它可以将滚动指向相应的部分，在HTML中使用id为的锚点时也是如此

例如：FlatList将显示类别：组合菜、配菜、热狗等。对于FlatList显示的每个类别，我已经创建了一个视图来显示该类别中的产品

我想做的是： 单击FlatList显示的类别时，滚动到显示该类别产品的视图，即，如果单击Combo，页面滚动到显示Combo类别产品的视图，如果单击“配菜”，页面将滚动，直到显示“配菜”类别中产品的视图，显示的代码如下：

按照我的代码：（可以在这里模拟：）

import React，{useffect，useState}来自“React”；
从“react native”导入{View、Image、ImageBackground、Text、StyleSheet、ScrollView、Dimensions、FlatList、SafeAreaView、TouchableOpacity}；
从“expo”导入{AppLoading}；
从“expo常量”导入常量；
常数数据=[
{
id:“1”，
标题：“组合”，
分类：“第1节”，
},
{
id:“2”，
标题：“配菜”，
分类：“第2节”，
},
{
id:“3”，
标题：“热狗”，
分类：“第3节”，
},
{
id:“4”，
标题：“甜点”，
分类：“第4节”，
},
{
id:“5”，
标题：“饮料”，
分类：“第5节”，
},
];
常量renderItem=（{item}）=>{
返回(
);
};
常量项=（{Item，onPress，style}）=>(
{item.title}
);
导出默认函数App（）{
返回(
项目id}
/>
组合
配菜
热狗
甜点
饮料
);
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
paddingTop:Constants.statusBarHeight，
背景颜色：“#000”，
填充：8，
},
类别：{
背景颜色：“#FFFFFF”，
宽度：“100%”，
身高：50，
前10名，
marginBottom:20，
},
itenscategoria：{
填充：15，
边界：1，
边界半径：25，
marginRight:10，
},
第1节：{
玛金托普：10，
背景颜色：“#ccc”，
宽度：“100%”，
身高：200，
边界半径：10，
},
第2节：{
玛金托普：10，
背景颜色：“#ccc”，
宽度：“100%”，
身高：200，
边界半径：10，
},
第3节：{
玛金托普：10，
背景颜色：“#ccc”，
宽度：“100%”，
身高：200，
边界半径：10，
},
第4节：{
玛金托普：10，
背景颜色：“#ccc”，
宽度：“100%”，
身高：200，
边界半径：10，
},
第5节：{
玛金托普：10，
背景颜色：“#ccc”，
宽度：“100%”，
身高：200，
边界半径：10，
},
});

您可以使用

平面列表的
滚动索引

请参阅下面的完整代码，或

import React，{useffect，useState，useRef}来自'React'；
从“react native”导入{View、Image、ImageBackground、Text、StyleSheet、ScrollView、Dimensions、FlatList、SafeAreaView、TouchableOpacity}；
从“expo”导入{AppLoading}；
从“expo常量”导入常量；
常数数据=[
{
id:“1”，
标题：“组合”，
分类：“第1节”，
},
{
id:“2”，
标题：“配菜”，
分类：“第2节”，
},
{
id:“3”，
标题：“热狗”，
分类：“第3节”，
},
{
id:“4”，
标题：“甜点”，
分类：“第4节”，
},
{
id:“5”，
标题：“饮料”，
分类：“第5节”，
},
];
导出默认函数App（）{
const flatListRef=useRef（）；
常量handleItemPress=（索引）=>{
flatListRef.current.scrollToIndex（{animated:true，index}）；
};
常量renderItem=（{item，index}）=>{
返回(
handleItemPress（索引）}
/>
);
};
常量项=（{Item，onPress，style}）=>(
{item.title}
);
常量renderDetails=（{item，index}）=>(
{item.title}
);
返回(
项目id}
/>
项目id}
/>
);
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
paddingTop:Constants.statusBarHeight，
背景颜色：“#000”，
填充：8，
},
类别：{
背景颜色：“#FFFFFF”，
宽度：“100%”，
身高：50，
前10名，
marginBottom:20，
},
itenscategoria：{
填充：15，
边界：1，
边界半径：25，
marginRight:10，
},
第节：{
玛金托普：10，
背景颜色：“#ccc”，
宽度：“100%”，
身高：200，
边界半径：10，
},
});
谢谢！但是，它在web版本中不起作用。你知道为什么吗？
import React, { useEffect, useState } from 'react';
import { View, Image, ImageBackground, Text, StyleSheet, ScrollView, Dimensions, FlatList, SafeAreaView, TouchableOpacity } from 'react-native';
import { AppLoading } from 'expo';
import Constants from 'expo-constants';


const DATA = [
  {
    id: "1",
    title: "Combos",
    categorie: "section1",
  },
  {
    id: "2",
    title: "Side Dishes",
    categorie: "section2",
  },
  {
    id: "3",
    title: "Hot Dog",
    categorie: "section3",
  },
  {
    id: "4",
    title: "Desserts",
    categorie: "section4",
  },
  {
    id: "5",
    title: "Drinks",
    categorie: "section5",
  },
];

const renderItem = ({ item }) => {

  return (
    <Item
      item={item}
    />
  );
};

const Item = ({ item, onPress, style }) => (
  <TouchableOpacity onPress={onPress} >
    <Text style={styles.itenscategoria}>{item.title}</Text>
  </TouchableOpacity>
);



export default function App() {


  return (
    <View style={styles.container}>
      <View style={styles.categories}>

      <FlatList
        data={DATA}
        horizontal
        showsHorizontalScrollIndicator={false}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
      />


      </View>
        <ScrollView>
        <View style={styles.section1}>
          <Text>Combos</Text>
        </View>

        <View style={styles.section2}>
          <Text>Side Dishes</Text>
        </View>

        <View style={styles.section3}>
          <Text>Hot Dog</Text>
        </View>

        <View style={styles.section4}>
          <Text>Desserts</Text>
        </View>

        <View style={styles.section5}>
          <Text>Drinks</Text>
        </View>
      </ ScrollView>

    </View >
    );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#000',
    padding: 8,
  },
  categories: {
    backgroundColor: '#FFFFFF',
    width: '100%',
    height: 50,
    top: 10,
    marginBottom:20,
  },
  itenscategoria: {
    padding:15,
    border: 1,
    borderRadius:25,
    marginRight:10,
},
  section1: {
    marginTop: 10,
    backgroundColor: '#ccc',
    width: '100%',
    height: 200,
    borderRadius: 10,
  },
  section2: {
    marginTop: 10,
    backgroundColor: '#ccc',
    width: '100%',
    height: 200,
    borderRadius: 10,
  },
  section3: {
    marginTop: 10,
    backgroundColor: '#ccc',
    width: '100%',
    height: 200,
    borderRadius: 10,
  },
  section4: {
    marginTop: 10,
    backgroundColor: '#ccc',
    width: '100%',
    height: 200,
    borderRadius: 10,
  },
  section5: {
    marginTop: 10,
    backgroundColor: '#ccc',
    width: '100%',
    height: 200,
    borderRadius: 10,
  },
});