如何一次在整个屏幕上仅显示一个FlatList项目,就像一次显示一幅图像

时间:2020-10-24 10:30:20

标签: react-native android-viewpager react-native-android react-native-flatlist react-native-video

我正在尝试通过Flatlist渲染视频。我已经尝试过ViewPager,但是ViewPager具有有限的功能,并且我不想再使用它,我想改用FlatList,但是问题是我不能像ViewPager那样滚动Flatlist ,默认情况下它一次只能显示一个视频,并且滚动非常流畅,快速,而没有因此,在您需要帮助的情况下,我想实现在FlatList整个屏幕上一次滚动和渲染一项的相同功能。谢谢

这是我的ViewPager代码。

    <ViewPager
      orientation="vertical"
      initialPage={0}
      style={{flex: 1, backgroundColor: 'black'}}
      onPageSelected={(e) => {
        console.log(e);
        this.handlePause(e.nativeEvent.position);
      }}>
      {this.state.videos.map((item, i) => {
        return (
          <DoubleTap
            key={i}
            style={{flex: 1}}
            
            doubleTap={() => {
              this.toggleLike(item.challenge_id);
            }}
            delay={200}>
            <TouchableWithoutFeedback
              style={{flex: 1}}
              onPress={() => {
                this.handlePlayPause(item.challenge_id);
              }}>
              <Video
                ref={(ref) => {
                  this.video = ref;
                }}
                poster={`${BASE_URL}${item.thumbnail}`}
                resizeMode="cover"
                source={{
                  uri: item.file,
                }}
                style={styles.mediaPlayer}
                volume={0.4}
                paused={item.paused}
                onReadyForDisplay={() => {
                  this.handleVideoLoading(item.challenge_id);
                }}
                posterResizeMode={'cover'}
              />
            </TouchableWithoutFeedback>
           
           
          </DoubleTap>
        );
      })}
    </ViewPager>

这是我的FlatList renderItem

 renderVid = ({item, index}) => {
    return (
      <Video
        key={index}
        paused={item.paused}
        source={{
          uri: item.vid,
        }}
        style={{
          height: '100%',
          backgroundColor: '#2f2f2f',
        }}
        volume={0.4}
        posterResizeMode={'cover'}
      />
    );
  };

0 个答案:

没有答案