web-dev-qa-db-ja.com

React Nativeの透明オーバーレイ

私はアプリで透明なオーバーレイをスライドさせようとしていますが、これはほとんど次のようなものです（すべて/フィルターバイ）：

transparent slider

これまでのところ、react-native-sliderとreact-native-overlayが見つかりました。スライダーを上から下に機能するように変更しましたが、常にListViewの下にも移動します。 react-native-overlayを使用している場合、オーバーレイは静的であり、移動できません。

オリジナルの反応ネイティブチュートリアル この要点 からデモコードを追加しました。ボタンをクリックすると、コンテンツが固定され、メニューがオーバーレイされます。透明性は現時点ではそれほど重要ではありませんが、素晴らしいでしょう。

最もスマートなソリューションは何でしょうか？

javascriptreactjsreact-native
33
Patrick

下に移動しないListViewのキーは、オーバーレイの位置をabsoluteに設定することです。そうすることで、ビューの位置と幅/高さを手動で設定でき、それはflexboxレイアウトに従いません。次の短い例をご覧ください。オーバーレイの高さ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;
59
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
  }
});

ライブデモ： https://sketch.expo.io/S15Lt3vjg

ソースリポジトリ： https://github.com/Dorian/sketch-reactive-native-apps

12
Dorian

この例を使用してオーバーレイを作成できます。オーバーレイの表示と非表示の状態を変更できます。

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

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

賢い方法??

私にとって最も賢い方法は、React-nativeのModalsを使用して高度にカスタマイズ可能なresponsiveエクスペリエンスを構築することです。ユーザーがサイドドロワーまたはナビゲーションバーを実装するための既存のnpmモジュール、私はモーダルを使用してこれを行います。
必要に応じて、Modalsを使用してナビゲーションドロワーを実現するサンプルコードスニペットを提供できます。

1
Suhail Jain

私はこの方法で同じ問題を抱えていました。

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