React Native 투명 오버레이

React Native 투명 오버레이

앱에서 투명 오버레이를 아래로 슬라이드하려고 합니다(모두 또는 필터 기준).

지금까지 리액션-네이티브-슬라이더와 리액션-네이티브-오버레이를 찾았습니다.슬라이더를 위에서 아래로 움직이도록 변경했지만 List View에서도 항상 아래로 이동합니다.react-native-overlay를 사용하면 오버레이가 정지되어 움직일 수 없습니다.

나는 이 요지에 원래 리액트 네이티브 튜토리얼의 데모 코드를 추가했다.버튼을 클릭하면 콘텐츠가 고정되고 메뉴가 오버레이됩니다.지금은 투명성이 그렇게 중요하지 않지만 멋질 거야.

가장 현명한 해결책은 무엇일까요?

ListView가 아래로 이동하지 않는 비결은 오버레이의 위치를 다음과 같이 설정하는 것입니다.absolute이렇게 하면 뷰의 위치와 너비/높이를 수동으로 설정할 수 있으며 플렉스박스 레이아웃을 따르지 않게 됩니다.다음의 간단한 예를 확인해 주세요.오버레이의 높이는 360으로 고정되어 있지만 쉽게 애니메이션을 만들거나 동적으로 만들 수 있습니다.

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

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

라이브 데모: https://sketch.expo.io/S15Lt3vjg

출처: https://github.com/Dorian/sketch-reactive-native-apps

이 예를 사용하여 오버레이를 작성할 수 있습니다.오버레이에 대해 표시 및 표시 안 함 상태를 변경할 수 있습니다.

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"
  },
});

나도 이런 식으로 하는 것과 같은 문제를 겪고 있었다.

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

사용하는 편이 좋을지도 모른다ImageBackground컴포넌트

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

가장 현명한 방법?

가장 현명한 방법은 반응 원어민에서 모달(Modals)을 사용하여 매우 커스터마이즈 가능한 응답 경험을 구축하는 것입니다.모달의 모션 방향 설정, 투명도 설정, 가시성 전환 등을 쉽게 할 수 있습니다.저는 개인적으로 사이드 드로어나 네비게이션 바를 구현하기 위한 기존의 npm 모듈을 가지고 있지 않습니다.모달(Modals)을 사용합니다.
원하시면 Modals를 사용하여 내비게이션 드로어를 실현하는 샘플 코드 스니펫을 드릴 수 있습니다.

언급URL : https://stackoverflow.com/questions/30638739/transparent-overlay-in-react-native