wake-up-neo.com

Transparente Überlagerung in React Native

Ich versuche, ein transparentes Overlay in einer App nach unten rollen zu lassen, so ziemlich hier (all/filter-by):

transparent slider

Bisher habe ich reaktiver Slider und reaktives Overlay gefunden. Ich habe den Schieberegler so geändert, dass er von oben nach unten funktioniert, aber er bewegt sich auch immer in der ListView nach unten. Bei der Verwendung von Reactative-Overlay ist das Overlay statisch und ich kann es nicht verschieben.

Ich habe etwas Demo-Code aus dem ursprünglichen Reactor-native Tutorial in diesem Gist hinzugefügt. Wenn Sie auf die Schaltfläche klicken, sollte der Inhalt haften und das Menü sollte sich überlagern. Die Transparenz ist im Moment nicht so wichtig, wäre aber großartig.

Was wäre die intelligenteste Lösung?

javascriptreactjsreact-native
29
Patrick

Der Schlüssel zu Ihrem ListView, das sich nicht nach unten bewegt, besteht darin, die Position der Überlagerung auf absolute festzulegen. Auf diese Weise können Sie die Position und die Breite/Höhe der Ansicht manuell festlegen und folgen nicht mehr dem Flexbox-Layout. Schauen Sie sich das folgende kurze Beispiel an. Die Höhe der Überlagerung ist auf 360 festgelegt, Sie können diese jedoch leicht animieren oder dynamisieren.

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

 background image with overlay 

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

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

11
Dorian

Vielleicht besser ImageBackground- Komponente verwenden. 

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 >
...
1
suther

Sie können dieses Beispiel zum Erstellen eines Overlays verwenden. Sie können den Status für sichtbares und unsichtbares Overlay ändern. 

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} opacity={0.9}>
        <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",
    zIndex: 1000,
    backgroundColor: "gray"
  },
  text: {
    width: "20%",
    fontSize: 15,
    color: "black",
    fontWeight: "bold"
  },
});

1
Naleen Dissanayake

Der intelligenteste Weg? 

der intelligenteste Weg für mich ist die Verwendung von Modals von reag-native, um eine äußerst anpassbare responsive - Erfahrung zu erstellen. Sie können die Bewegungsrichtungen des Modal ganz einfach einstellen, Transparenz einstellen, die Sichtbarkeit umschalten usw. usw. Module für die Implementierung von seitlichen Schubladen oder Navigationsleisten.... ich mache dies mit Modals.
Wenn Sie möchten, kann ich ein Beispielcode-Snippet angeben, das eine Navigationsleiste mit Modals erstellt 

1
Suhail Jain

Ich hatte das gleiche Problem, das ich so gemacht habe.

import {View,StyleSheet} from "react-native";
//where you want it to render
 <View style={styles.overlaycontainer}>
      <Text style={{color:"#fff"}}>Locating directions please wait ...</Text>        
 </View> 
// at the bottom of your in styles
const styles = StyleSheet.create({
  overlaycontainer:{
    ...StyleSheet.absoluteFillObject,
    backgroundColor: '#000',
    opacity:0.8,
    justifyContent:"center",
    alignItems:"center" 
  }
});
0
Saqy G