Javascript React Native 中的透明叠加
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30638739/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Transparent overlay in React Native
提问by Patrick
I'm trying to get a transparent overlay sliding down in an app, pretty much like this here (all/filter-by):
我正在尝试在应用程序中向下滑动透明覆盖层，非常像这里（全部/过滤器）：
So far I found react-native-slider and react-native-overlay. I modified the slider to work from top to bottom, but it always moves down the ListView as well. If using react-native-overlay, the overlay is static and I can't move it.
到目前为止，我发现了 react-native-slider 和 react-native-overlay。我修改了滑块从上到下工作，但它也总是向下移动 ListView。如果使用 react-native-overlay，覆盖层是静态的，我无法移动它。
I added some demo code from the original react-native tutorial in this gist. When clicking the button, the content should stick, and the menu should overlay. The transparency is not that important right now but would be awesome.
我在这个 gist 中添加了一些来自原始 react-native 教程的演示代码。单击按钮时，内容应保持不变，菜单应覆盖。透明度现在不是那么重要，但会很棒。
What would be the smartest solution?
最聪明的解决方案是什么？
回答by Thomas
The key to your ListView not moving down, is to set the positioning of the overlay to absolute. By doing so, you can set the position and the width/height of the view manually and it doesn't follow the flexbox layout anymore. Check out the following short example. The height of the overlay is fixed to 360, but you can easily animate this or make it dynamic.
您的 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;
回答by Dorian
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
}
});
Live demo: https://sketch.expo.io/S15Lt3vjg
现场演示：https: //sketch.expo.io/S15Lt3vjg
Source repo: https://github.com/Dorian/sketch-reactive-native-apps
回答by Naleen Dissanayake
You can use this example for create overlay.You can change state for visible and invisible for overlay.
您可以使用此示例创建叠加层。您可以更改叠加层的可见和不可见状态。
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"
},
});回答by Saqy G
I was having same problem I did it this way.
我遇到了同样的问题，我是这样做的。
import {View,StyleSheet} from "react-native";
//where you want it to render
<View style={styles.overlaycontainer}>
<Text style={{color:"#fff"}}>Locating directions please wait ...</Text>
</View>
// at the bottom of your in styles
const styles = StyleSheet.create({
overlaycontainer:{
...StyleSheet.absoluteFillObject,
backgroundColor: '#000',
opacity:0.8,
justifyContent:"center",
alignItems:"center"
}
});
回答by suther
Maybe better use ImageBackground-Component.
也许更好地使用ImageBackground-Component。
import {View, ImageBackground, Text} from 'react-native';
const styles = StyleSheet.create({
});
...
<ImageBackground
style={styles.image}
source={{uri: props.picture_url}}
>
<View style={styles.textbox}>
<Text style={styles.title} >CHILD OF IMAGE_BACKGROUND</Text >
</View>
</ImageBackground >
...
回答by Suhail Jain
Smartest way ??
最聪明的方法？？
the smartest way to me is to use Modals from react-native to build a highly customizable responsiveexperience, you can easily set motion directions of the Modal, set transparency, toggle visibility etc etc, i personally have never user existing npm modules for implementing side drawers or navigation bars,
i do this using Modals.
If you wish i can give a sample code snippet which realizes a navigation drawer using Modals
对我来说最聪明的方法是使用 react-native 中的 Modals 来构建高度可定制的响应体验，您可以轻松设置 Modal 的运动方向、设置透明度、切换可见性等，我个人从未使用现有的 npm 模块来实现 side抽屉或导航栏，我使用模态来做到这一点。
如果你愿意，我可以给出一个示例代码片段，它使用模态实现导航抽屉
