React Native中的透明覆盖 [英] Transparent overlay in React Native

问题描述

我正在尝试在应用中向下滑动透明叠加层，非常类似于此处（全部/过滤器）：

I'm trying to get a transparent overlay sliding down in an app, pretty much like this here (all/filter-by):

到目前为止，我发现react-native-slider并做出反应-native叠加。我将滑块修改为从上到下工作，但它总是沿着ListView向下移动。如果使用react-native-overlay，叠加层是静态的，我无法移动它。

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教程中添加了一些演示代码在这个要点。单击按钮时，内容应该粘住，菜单应叠加。透明度现在并不重要，但会很棒。

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.

什么是最聪明的解决方案？

What would be the smartest solution?

推荐答案

ListView不向下移动的关键是将叠加层的位置设置为绝对值。通过这样做，您可以手动设置视图的位置和宽度/高度，它不再遵循flexbox布局。看看下面的简短示例。叠加层的高度固定为360，但您可以轻松制作动画或使其动态化。

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.

'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;

这篇关于React Native中的透明覆盖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！