При добавлении вьюпейджеров видео не отображаются - PullRequest
Новая
       59

При добавлении вьюпейджеров видео не отображаются

0 голосов
/ 04 февраля 2020

Я использовал плоский список для отображения 4 видео, извлекаемых из API, однако я хочу, чтобы они прокручивались по одному, следовательно, добавлен viewpager для отображения каждого видео на отдельной странице, однако при добавлении viewpager я не вижу восстановить видео на внешнем интерфейсе, однако они появляются в моих журналах.

Код с видоискателем: 

<ViewPager scrollEnabled={true} orientation={"vertical"} >
        <FlatList
        data={this.state.data.product}
        scrollEventThrottle={1}
        onEndThreshold={0}
        renderItem={({ item }) => (
        <View style = {{alignContent: 'stretch'}} >
            <ScrollView scrollEventThrottle={1}>



      <ViewportAwareVideo
          repeat paused={this.state.videoPaused}
          source={{ uri: item.urlVid }}
          resizeMode = "cover"
          preTriggerRatio={PRE_TRIGGER_RATIO} 
          retainOnceInViewport={false}  
          style={{width: width, height:height}}
          innerRef={ref => this._videoRef = ref}
          onViewportEnter={() => this._videoRef.play()}
          onViewportLeave={() => this._videoRef.stop()} 
        />



    </ScrollView>

         <View
              style={{
                position: 'absolute',
                flexDirection: 'column',
                alignItems: 'flex-end',
                top: '50%',
                right: 10,
              }}>
              <TouchableOpacity
                 onPress= {() => this.onButtonPress(item)}
                style={{
                  alignItems: 'center',

                  borderRadius: 60,
                  padding: 10,
                }}>
                <Icon
                  name="heart"
                  size={30}
                  color={this.state.likedItemIds.includes(item._id) ? "red" : "white"}

                />
              </TouchableOpacity>


              <TouchableOpacity
                onPress={()=>this.shareProduct(item)}
                style={{
                  alignItems: 'center',

                  borderRadius: 60,
                  padding: 10,
                }}>
                <Icon name="share" size={30} color="white" />
              </TouchableOpacity>
              <Text style={{ right: 5, color: 'white' }} />
              <TouchableOpacity
                style={{
                  alignItems: 'center',

                  borderRadius: 60,
                  padding: 10,
                }}>
                <Icon name="whatsapp" size={30} color="white" />
              </TouchableOpacity>
              <Text style={{ right: 5, color: 'white' }} />
              <TouchableOpacity
              onPress= {() => this.download(item)}
                style={{
                  alignItems: 'center',
                  borderRadius: 60,
                  padding: 10,
                }}>
                <Icon name="download" size={30} color="white" />
              </TouchableOpacity>
              <Text style={{ right: 5, color: 'white' }} />
            </View>
            <View
              style={{
                position: 'absolute',
                flexDirection: 'column',

                top: '90%',
                left: 10,
              }}>
                <TouchableOpacity onPress={() => this.props.navigation.navigate('Product', {_id: item._id})}>
                <View
                style={{
                  flexDirection: 'row',
                }}>
                <Text
                  style={{ fontWeight: 'bold', fontSize: 20, color: 'white' }}>
                  {item.title} - {item.price}
                </Text>



              </View>
                </TouchableOpacity>


            </View>

        </View> 


        )}

        keyExtractor={ item => item._id}
      />
   </ViewPager>

Пожалуйста, помогите мне и дайте мне знать, почему это так?

...