React Native 中的透明覆盖

Posted 2023-02-22

【中文标题】React Native 中的透明覆盖

【英文标题】：Transparent overlay in React Native

【发布时间】：2015-08-18 18:19:37

【问题描述】：

我正在尝试在应用中让透明的覆盖层向下滑动，就像这里一样（all/filter-by）：

到目前为止，我找到了 react-native-slider 和 react-native-overlay。我修改了滑块以从上到下工作，但它也总是向下移动 ListView。如果使用 react-native-overlay，覆盖是静态的，我不能移动它。

我添加了一些来自原始 react-native 教程 in this gist 的演示代码。单击按钮时，内容应粘贴，菜单应覆盖。透明度现在不是那么重要，但会很棒。

什么是最聪明的解决方案？

【问题讨论】：

我想你可以试试this component。我的意思是你应该只设置position: 'absolute' 来查看被下拉的视图并且它可以工作。

【参考方案1】：

我遇到了同样的问题，我这样做了。

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

【参考方案2】：

您可以使用此示例创建叠加层。您可以更改叠加层的可见和不可见状态。

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

【参考方案3】：

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

【参考方案4】：

最聪明的方法？？

对我来说最聪明的方法是使用 react-native 的 Modals 来构建高度可定制的响应式体验，您可以轻松设置 Modal 的运动方向、设置透明度、切换可见性等，我个人从未使用现有的 npm 模块来实现侧抽屉或导航栏， 我使用模态来做到这一点。 如果你希望我可以给出一个示例代码 sn-p 它使用 Modals 实现导航抽屉

【参考方案5】：

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

【讨论】：

这将在未来被弃用。你不能再在图片中添加任何东西了。

@Marcio 你有消息来源吗？

自上次反应本机更新以来出现的消息作为警告消息。对此的解决方法是开始使用新的 ImageBackground 组件。这是有道理的，因为图像不应该有任何孩子。

【参考方案6】：

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;

【讨论】：

谢谢！我试过了，但它仍然将列表向下移动。这可能是因为动画和 setNativeProps 的原因吗？

找出原因...... topMenu 实现不移动菜单而是移动内容区域，这就是它总是移动的原因。现在尝试重写它以使用菜单滑动。

为什么我们不能直接给width: null