web-dev-qa-db-fra.com

Superposition transparente dans React Native

J'essaie d'obtenir un calque transparent glissant vers le bas dans une application, un peu comme ceci (all/filter-by):

transparent slider

Jusqu'ici, j'ai trouvé réagit-native-slider et réagit-native-overlay. J'ai modifié le curseur pour qu'il fonctionne de haut en bas, mais il parcourt toujours également le ListView. Si vous utilisez réagissant-natif-superposition, la superposition est statique et je ne peux pas le déplacer.

J'ai ajouté du code de démonstration du didacticiel original de réaction/natif dans ce Gist . Lorsque vous cliquez sur le bouton, le contenu doit rester collé et le menu doit se superposer. La transparence n’est pas si importante en ce moment, mais ce serait formidable.

Quelle serait la solution la plus intelligente?

javascriptreactjsreact-native
29
Patrick

Pour que la liste ne descende pas, la clé consiste à définir le positionnement de la superposition sur absolute. Ce faisant, vous pouvez définir manuellement la position et la largeur/hauteur de la vue, qui ne suit plus la présentation de la flexbox. Découvrez le court exemple suivant. La hauteur de la superposition est fixée à 360, mais vous pouvez facilement l'animer ou la rendre dynamique.

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

Démo en direct: https://sketch.expo.io/S15Lt3vjg

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

11
Dorian

Peut-être mieux utiliser ImageBackground- Component. 

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

Vous pouvez utiliser cet exemple pour créer une superposition. Vous pouvez modifier l'état pour visible et invisible pour la superposition. 

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

Façon la plus intelligente ?? 

pour moi, le moyen le plus intelligent est d'utiliser Modals à partir de react-native pour créer une expérience hautement personnalisable responsive , vous pouvez facilement définir les directions de déplacement du Modal, définir la transparence, basculer la visibilité, etc. modules pour la mise en œuvre des tiroirs latéraux ou des barres de navigation, Je le fais en utilisant Modals.
Si vous le souhaitez, je peux vous donner un exemple d'extrait de code qui réalise un tiroir de navigation à l'aide de Modals. 

1
Suhail Jain