在 Flatlist header 內反應本機 scrollView 無法滾動

Question

根據需求，我需要在 FlatList(vertical) 里面設計一個 ScrollView(vertical)

這是我的布局

<FlatList>
  renderHeader = <ScrollView/>
  renderData= ...
</FlatList>

我的代碼運行正常，但是 scrollView 無法滾動，誰能幫忙

Answer 1

這是android才有的問題，給ScrollView添加nativeScrollEnabled屬性。

Answer 2

這是您的解決方案，固定每個renderItem組件的大小，並將此組件包裝在ScrollView中將解決您的問題。

import * as React from 'react';
import { Text, View, StyleSheet, FlatList, ScrollView } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>

  <FlatList
          data={['',"","","",""]} //Your Data Object
          ListHeaderComponent={() => {
            return <ScrollView style={{height: 100, marginVertical: 20}}>
                     <View>
                         <Text>Header</Text>
                          <Text>Header</Text>
                          <Text>Headr</Text>
                          <Text>Header</Text>
                          <Text>Header</Text>
                          <Text>Header</Text>
                          <Text>Header</Text>
                          <Text>Header</Text>
                          <Text>Header</Text>
                          <Text>Header</Text>
                     </View> 
                   </ScrollView>
          }}
          renderItem={() => {
            return <ScrollView style={{height: 100, marginVertical: 20}}>
                     <View>
                         <Text>renderItem</Text>
                     </View> 
                   </ScrollView>
          }}
    />
    
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  }
});