0
546
ViewsSuperposición transparente en React Native
Estoy tratando de obtener una superposición transparente deslizándose hacia abajo en una aplicación, más o menos así aquí (todo/filtrado por):
Hasta ahora encontré react-native-slider y react-native-overlay. Modifiqué el control deslizante para que funcione de arriba a abajo, pero siempre se mueve hacia abajo en ListView también. Si uso react-native-overlay, la superposición es estática y no puedo moverla.
Agregué un código de demostración del tutorial original de reacción nativa en este gist . Al hacer clic en el botón, el contenido debe permanecer y el menú debe superponerse. La transparencia no es tan importante en este momento, pero sería increíble.
¿Cuál sería la solución más inteligente?
3 answers
Answer question0
La clave para que su ListView no se mueva hacia abajo es establecer el posicionamiento de la superposición en absolute . Al hacerlo, puede establecer la posición y el ancho/alto de la vista manualmente y ya no sigue el diseño de flexbox. Mira el siguiente breve ejemplo. La altura de la superposición se fija en 360, pero puede animarla fácilmente o hacerla dinámica.
'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;0
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 } });Demostración en vivo: https://sketch.expo.io/S15Lt3vjg
Fuente de repositorio: https://github.com/Dorian/sketch-reactive-native-apps
0
Puede usar este ejemplo para crear superposición. Puede cambiar el estado para visible e invisible para superposición.
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" }, });