reactjs - 如何删除视频上的状态栏和重叠图标?
问题描述
我需要视频上的图标,但是我希望它们在向下滚动时粘住,我已将图标插入到平面列表之外,但无法删除空白,有人可以帮忙吗?
以下是我实现图标的返回函数:
<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 并将位置设为绝对后,顶部仍然有这个空白,请告诉我如何完全删除它
解决方案
对于状态栏:可以使用 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 在其他视图之上显示您的图标
推荐阅读
- machine-learning - 这些数字中的每一个在暗网中意味着什么?
- java - 使用Java字符串方法替换字符串中的字符
- javascript - Javascript - 橄榄球积分计算器
- ios - 如何识别ios设备中的唯一ID?
- c# - 如果在 lambda C# 中为 null,则为默认值
- java - 能不能用m个开关把所有的灯泡都转一下
- python - Python @property 用于编辑配置文件
- mysql - 无法使用 MySQL 安装程序或控制面板卸载 MySQL 服务器 8.0.13
- node.js - “npm ERR!code ELIFECYCLE”错误 Heroku 部署
- android - 使用 PdfRenderer 类渲染的 Pdf 显示质量很差的图像。怎么修?