Transparent Overlay in React india

Question

Ich versuche, ein transparentes Overlay zu erhalten Abrutschen in eine App, ziemlich genau wie diese hier (alle/Filter-by):

Bisher fand ich reagieren -native-slider und react-native-overlay. Ich habe den Schieberegler so geändert, dass er von oben nach unten funktioniert, aber er bewegt sich immer in der ListView. Wenn Sie reactive-native-overlay verwenden, ist das Overlay statisch und ich kann es nicht verschieben.

Ich habe einige Demo-Code aus dem ursprünglichen reaktiven nativen Tutorial in this gist hinzugefügt. Wenn Sie auf die Schaltfläche klicken, sollte der Inhalt beibehalten werden und das Menü sollte überlagern. Die Transparenz ist im Moment nicht so wichtig, wäre aber großartig.

Was wäre die intelligenteste Lösung?

Answer 1

Der Schlüssel zu Ihrer ListView nicht nach unten, ist die Positionierung des Overlay auf absolute. Auf diese Weise können Sie die Position und die Breite/Höhe der Ansicht manuell festlegen und sie folgt nicht mehr dem Flexbox-Layout. Schauen Sie sich das folgende kurze Beispiel an. Die Höhe der Überlagerung ist auf 360 festgelegt, aber Sie können diese leicht animieren oder dynamisch machen.

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

Answer 2

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

Quelle Repo: https://github.com/Dorian/sketch-reactive-native-apps

Answer 3

Smartest Weg ??

der cleverste Weg, mir ist Modals von reagieren-native zu verwenden, um eine hochgradig anpassbare reaktions Erfahrung aufbauen, können Sie leicht Bewegungsrichtungen des Modal gesetzt, setzen Sie Transparenz, Sichtbarkeit ändern etc etc, ich habe persönlich nie Benutzer vorhandene npm-modules zur implementierung von seitlichen schubladen oder navigationsleisten, ich mache das mit modalen.
Wenn Sie möchten, kann ich ein Beispiel Code-Snippet geben, die eine Navigationsleiste mit Modals