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
  },
});