Блог

Я пытаюсь создать ленту новостей с использованием React Native FlatList . Я хочу, чтобы он был похож на ленту Tik Tok, каждый элемент в FlatList которой занимает весь экран.

Прямо сейчас он имеет правильный макет, который я хочу, но проблема в том, что лента не прокручивается.

По какой-то причине FlatList он становится недоступным для прокрутки, если я установил для дочернего элемента значение have height: '100%' . Когда я меняю его на height: 1000 , он прокручивается, но я не хочу жестко кодировать высоту.

Я был бы признателен, если вы предложите какую-либо помощь вообще!

Вот компонент feed:

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

Это может помочь

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