FlatList 在 React-Native 中不滾動

Question

我正在嘗試使用FlatList在 React Native 上構建新聞提要。 我希望它類似於 Tik Tok 的提要， FlatList中的每個項目都占據整個屏幕。

現在它具有我想要的正確布局，但問題是提要不可滾動。

出於某種原因，如果我將孩子設置為height: '100%' ，則FlatList變得不可滾動。 當我將其更改為height: 1000時，它是可滾動的，但我不想硬編碼高度。

如果您提供任何幫助，我將不勝感激！

這是提要組件：

const Feed = () => {

  const renderItem = ({ item, index }) => {
    return (
      <FeedItem
        id={item.id.toString()}
        videoUrl={item.videoUrl}
        index={index}
      />
    )
  }

  return (
      <FlatList
        style={styles.container}
        contentContainerStyle={styles.children}
        data={someData}
        renderItem={renderItem}
        keyExtractor={(item, index) => item.id.toString()}
      />
  );
}

// styles
const styles = StyleSheet.create({
  container: {
    display: 'flex',
    flexDirection: 'column',
    height: '100%'
  },
  children: {
    flexGrow: 1,
  }
})

這是提要中的每個項目：

import { Video } from 'expo-av';

const FeedItem = ({ id, videoUrl, index }) => {
  return (
    <Video
      source={{ uri: videoUrl }}
      style={styles.backgroundVideo}
    />
  )
}

const styles = StyleSheet.create({
  backgroundVideo: {
    height: '100%'     // FIXME: problematic
  },
});

Answer 1

這可能會有所幫助

const FeedItem = ({ id, videoUrl, index }) => {
  return (
    <View style={{flex:1}}>
      <Video
        source={{ uri: videoUrl }}
        style={styles.videoStyle}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  videoStyle: {
    height: Screen.height,     // Remove this
    width: Screen.width
  },
});