如何滾動嵌套在部分列表中的所有平面列表？

Question

我有一個嵌套在 SectionList 中的 FlatList，如下所示。 總是有 3 個部分（行），每個部分都有一個帶有水平滾動的 FlatList。

預期的

單擊按鈕時，調用 scrollToEnd() function，將每個部分的所有 3 個平面列表滾動到結束。

問題

只有底部或最后一個平面列表滾動到末尾。

我不知道為什么會這樣 - 我認為平面列表中的 ref 可能只引用了最后一個渲染的平面列表，而不是其他兩個，也許？ 如果是這樣，歡迎任何提示或建議。 謝謝你。

             ...

             const flatlistRef = useRef();

             const scrollToEnd = () => {
                flatlistRef.current.scrollToEnd({ animating: true });
             };
             
             ...

             <SectionList
                    contentContainerStyle={styles.sectionListContainer}
                    stickySectionHeadersEnabled={false}
                    sections={myData}
                    renderSectionHeader={({ section }) => (
                        <>
                            <FlatList
                                horizontal
                                data={section.data}
                                contentContainerStyle={
                                    styles.flatlistContainer
                                }
                                renderItem={({ item }) => (
                                    <Button
                                        onPress={() => updateData(item.id)}
                                    >
                                        <ListItem item={item} />
                                    </Button>
                                )}
                                showsHorizontalScrollIndicator={false}
                                ref={flatlistRef}
                            />
                        </>
                    )}
                    renderItem={({}) => {
                        return null;
                    }}
                />

Answer 1

我也在研究這個，但我找到了一個解決方案，我可以使用react-native-paper創建一個Section.List 。

但您也可以使用map function，這是代碼

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

 const App = () =>{
     return(
         <View style={{flex: 1}}>
     {data.map((item, index) => (
         <View key={index} style={{borderBottomColor: 'black', borderBottomWidth: 2}}>
             <Text style={{fontSize: 30, fontWeight: 'bold'}}>{item.title}</Text>
             {item.items && <>
             {item.items.map((item, index) => (
                 <View key={index} style={{backgroundColor: '#7fc', borderBottomColor: 'blue', borderBottomWidth: 2}}>
                  <Text style={{fontSize: 20, marginLeft: 40, color: 'blue'}}>{item.title}</Text>
                      {item.items && <>
                      {item.items.map((item, index) => (
                        <View key={index}  style={{backgroundColor: 'yellow', borderBottomColor: 'red', borderBottomWidth: 2}}>
                            <Text style={{fontSize: 16, marginLeft: 80,}}>{item.title}</Text>
                        </View>
                     ))}
                    </>}
                </View>
             ))}
            </>}
         </View>
      ))}
 </View>
     )
 }
 export default App;

我希望它會有所幫助。