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

Question

[![在此处输入图片描述][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 并将位置设置为绝对位置后，顶部仍然有这个空白，请告诉我如何完全删除它

Answer 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>

Answer 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 将您的图标显示在其他视图之上