React Native中的透明覆蓋

Question

我試圖讓一個透明的疊加層在應用程序中向下滑動，這里非常像這樣（全部/過濾器）：

到目前為止，我發現了react-native-slider和react-native-overlay。 我將滑塊修改為從上到下工作，但它總是沿着ListView向下移動。 如果使用react-native-overlay，疊加層是靜態的，我無法移動它。

我在這個要點中添加了原始react-native教程中的一些演示代碼。 單擊按鈕時，內容應該粘住，菜單應疊加。 透明度現在並不重要，但會很棒。

什么是最聰明的解決方案？

Answer 1

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;

Answer 2

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

Answer 3

您可以將此示例用於創建疊加。您可以更改疊加的可見和不可見狀態。

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

Answer 4

也許更好地使用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 >
...

Answer 5

最聰明的方式？

對我來說最聰明的方法是使用來自react-native的Modals來構建高度可定制的響應體驗，您可以輕松設置模態的運動方向，設置透明度，切換可見性等等，我個人從未使用現有的npm模塊來實現側面抽屜或導航欄，我使用Modals。
如果您希望我能提供一個示例代碼片段，它使用Modals實現導航抽屜

Answer 6

我遇到了同樣的問題，我這樣做了。

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