Как удалить строку состояния и наложить значки поверх видео?

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, чтобы показать ваш значок поверх другого вида