我正在尝试在应用程序中向下滑动透明覆盖层，非常像这里（全部/过滤器）：
到目前为止，我发现了 react-native-slider 和 react-native-overlay。我修改了滑块从上到下工作，但它也总是向下移动 ListView。如果使用 react-native-overlay，覆盖层是静态的，我无法移动它。
我在这个 gist 中添加了一些来自原始 react-native 教程的演示代码。单击按钮时，内容应保持不变，菜单应覆盖。透明度现在不是那么重要，但会很棒。
最聪明的解决方案是什么？
您的 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;
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
}
});
现场演示：https : //sketch.expo.io/S15Lt3vjg
源代码库：https : //github.com/Dorian/sketch-reactive-native-apps
您可以使用此示例创建叠加层。您可以更改叠加层的可见和不可见状态。
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"
},
});也许更好地使用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 >
...