如何删除视频上的状态栏和重叠图标？

Posted 2023-03-15

【中文标题】如何删除视频上的状态栏和重叠图标？

【英文标题】：How do I remove the status bar and overlap icons over the video?

【发布时间】：2020-01-29 06:22:26

【问题描述】：

[![在此处输入图片描述][2]][2]

我需要视频上的图标，但是我希望它们在向下滚动时粘住，我已将图标插入到平面列表之外但无法删除空白，有人可以帮忙吗？

下面是我实现图标的返回函数：

<View style=flex:1>
        <View style=flexDirection:'row',  justifyContent: 'flex-end', position:'absolute', zIndex:1>
        <TouchableOpacity>
              <Icon
                name="shopping-cart"
                size=24
                style= paddingRight: 40 
                color="black"
              />
            </TouchableOpacity>
            <TouchableOpacity>
              <Icon
                name="user-circle"
                size=24
                style= paddingRight: 20 
                color="black"
              />
            </TouchableOpacity>
            </View>
        <FlatList
        data=this.state.data.product

        renderItem=( item ) => (
        <View style = alignContent: 'stretch'>
      /* this.header */
      <ViewportAwareVideo

          source= uri: item.urlVid 
          visible=this.state.visible
          resizeMode = "cover"
          style=width: width, height:height
          innerRef=ref => this._videoRef = ref
          onViewportEnter=() => this._videoRef.play()
          onViewportLeave=() => this._videoRef.stop() 
        />

         <View
              style=
                position: 'absolute',
                flexDirection: 'column',
                alignItems: 'flex-end',
                top: '50%',
                right: 10,
              >
              <TouchableOpacity
                onPress=this.handleClick
                style=
                  alignItems: 'center',

                  borderRadius: 60,
                  padding: 10,
                >
                <Icon
                  name="heart"
                  size=30
                  color=this.state.buttonColor
                  onPress=this.onButtonPress
                />
              </TouchableOpacity>


              <TouchableOpacity
                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
                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,
              >
              <View
                style=
                  flexDirection: 'row',
                >
                <Text
                  style= fontWeight: 'bold', fontSize: 20, color: 'white' >
                  item.title - item.price
                </Text>



              </View>

            </View>

        </View>


        )

        keyExtractor= item => item.id
      />

      </View>

添加 Zindex 并将位置设置为绝对位置后，顶部仍然有这个空白，请告诉我如何完全删除它

【问题讨论】：

如果您可以分享一些代码，那么人们可以看到您到目前为止所做的工作。

完成了，如果你还想要别的东西，请告诉我@Ravi

您可以使用position : absolute 将您的图标重叠在视频组件上

【参考方案1】：

<TouchableOpacity
    style=
        position: 'absolute',
        top:10,
        left:10,
        z-index:100
    >
    <Icon
        name="shopping-cart"
        size=24
        style= paddingRight: 40 
        color="black"
    />
</TouchableOpacity>
<TouchableOpacity
    style=
        position: 'absolute',
        top:10,
        left:30,
        z-index:100
    
    >
    <Icon
        name="user-circle"
        size=24
        style= paddingRight: 20 
        color="black"
    />
</TouchableOpacity>

【参考方案2】：

状态栏：可以使用StatusBar

  <StatusBar hidden />  // import from react-native and use it in your component 

对于重叠，您可以使用样式位置：- 绝对到您的图标

 position : "absolute" // also you can set top , bottom , right to your icons

使用 zIndex : 500 将您的图标显示在其他视图之上

【讨论】：

图标在视频后面添加位置：绝对

您可以使用您的图标样式将其设置为大于 0 的 zIndex 以在顶部显示您的图标

第一个视频仍然没有覆盖整个屏幕，顶部是一个小空白

用新的错误更新您的问题并告诉我

已更新，我的问题，请查看并帮助