React Native 中 FlatList 內的 SlidingUpPanel 按鈕

Question

我正在為 SlidingUpPanel 和 FlatList 苦苦掙扎。 我想做的是：FlatList 包含

1. 對象 1
2. 對象 2
3. 對象 3

如果我按每個對象 1 或 2 或 3，我想彈出 SlidingUpPanel。

我設計的：

<SafeareaView>
    <View style={myStyle}>
        <SlidingUpPanel>
            ref={c => (_panel = c)}
            ...
        </SlidingUpPanel>
    </View>
    <FlatList>
        <TouchableOpacity onPress={() => _panel.show(height);}>
            ...
        </TouchableOpacity>
    </FlatList>
</SafeAreaView>

但它不起作用，我掙扎了很長時間。
實際上，我不確定 FlatList 中的“onPress _panel.show”是否可以指向 SlidingUpPanel 中的“_panel”。

我錯過了什么嗎？ SlidingUpPanel & FlatList 有什么建議或例子嗎？ 感謝您的幫助。

Answer 1

注意：當面板中有 scollview 或 flatlist並且面板中有 ScrollView時，可能會出現此處未顯示視圖中所寫的問題- 不工作

<SafeareaView>
    <View style={myStyle}>
       <SlidingUpPanel>
         ref={c => (_panel = c)}
            ...
         <View style={{ height: 236 }}> 
            <FlatList
              data={this.state.locations} 
              renderItem={({ item }) => (
               <TouchableOpacity onPress={() => _panel.show(height);}>
                   ...
               </TouchableOpacity>
              )} 
              keyExtractor={item => item.id.toString()} 
            />
         </View>
      </SlidingUpPanel>
    </View>
</SafeAreaView>

將 ScrollView 或 FlatList 包裝在另一個視圖中，並為該視圖指定高度。 像這樣