当前位置: 动力学知识库 > 问答 > 编程问答 >

reactjs - 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):

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.

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?

网友答案:

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;
网友答案:

I think you can try this component. I mean you should just set position: 'absolute' to view that is pulled down and it could work.

网友答案:

Can you share the styles for the overlay ? I guess you can make it possible if you use position absolute for the Overlay instead of the regular position flex.

分享给朋友:
您可能感兴趣的文章:
随机阅读: