React Native中的透明覆盖
React Native中的透明覆盖
提问于 2015-06-04 16:27:59
我正在尝试在应用程序中获得一个透明的覆盖图，就像下面这样(all/filter-by)：
到目前为止，我找到了react-native-slider和react-native-overlay。我修改了滑块以从上到下工作，但它也总是向下移动ListView。如果使用react-native- overlay，覆盖是静态的，我不能移动它。
我从最初的react-native tutorial in this gist添加了一些演示代码。单击该按钮时，内容应固定，菜单应重叠。透明度现在并不是那么重要，但会很棒。
最聪明的解决方案是什么？
回答 5
Stack Overflow用户
回答已采纳
发布于 2015-06-16 22:33:11
你的ListView不会下移的关键是将覆盖的位置设置为absolute。通过这样做，您可以手动设置视图的位置和宽度/高度，它不再遵循flexbox布局。看看下面这个简短的例子。覆盖的高度固定为360，但您可以轻松地对其设置动画或使其动态化。
'use strict';
var React = require('react-native');
var Dimensions = require('Dimensions');
// We can use this to make the overlay fill the entire width
var { width, height } = Dimensions.get('window');
var {
AppRegistry,
StyleSheet,
Text,
View,
} = React;
var SampleApp = React.createClass({
render: function() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to the React Native Playground!
</Text>
<View style={[styles.overlay, { height: 360}]} />
</View>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
// Flex to fill, position absolute,
// Fixed left/top, and the width set to the window width
overlay: {
flex: 1,
position: 'absolute',
left: 0,
top: 0,
opacity: 0.5,
backgroundColor: 'black',
width: width
}
});
AppRegistry.registerComponent('SampleApp', () => SampleApp);
module.exports = SampleApp;Stack Overflow用户
发布于 2017-03-16 15:13:09
import React, { Component } from 'react';
import { Image, StyleSheet, View } from 'react-native';
export default class App extends Component {
render() {
return (
<Image source={{uri: 'http://i.imgur.com/IGlBYaC.jpg'}} style={s.backgroundImage}>
<View style={s.overlay}/>
</Image>
);
}
}
const s = StyleSheet.create({
backgroundImage: {
flex: 1,
width: null,
height: null,
},
overlay: {
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0,
backgroundColor: 'red',
opacity: 0.3
}
});Stack Overflow用户
发布于 2018-08-23 01:07:40
您可以使用此示例创建overlay.You可以更改覆盖的可见和不可见状态。
import React, { Component } from "react";
import { View, Text, StyleSheet } from "react-native";
class Popup extends Component {
constructor(props) {
super(props);
this.state = {
isPopupTrue: true
};
}
render() {
return (
<View style={styles.container}>
{ this.state.isPopupTrue &&
(<View style={styles.overlay}>
<View style={styles.popup}>
<Text style={styles.text}> Overlay </Text>
</View>
</View>)
}
</View>
);
}
}
export const styles = StyleSheet.create({
container: {
flex:1,
backgroundColor: "#c0d6e4"
},
overlay: {
position: "absolute",
top: 0,
right: 0,
bottom: 0,
left: 0,
justifyContent: "center",
alignItems: "center",
backgroundColor: "gray",
opacity: 0.9,
},
text: {
width: "20%",
fontSize: 15,
color: "black",
fontWeight: "bold"
},
});
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30638739
复制相关文章
相似问题