Javascript React-Native中的透明覆盖

我试图在应用程序中获得一个向下滑动的透明覆盖层，非常像这里（全部/过滤方式）：

到目前为止，我找到了react native slider和react native overlay。我修改了滑块，使其从上到下工作，但它也总是在ListView中向下移动。如果使用react native overlay，则该覆盖是静态的，我无法移动它

我从最初的react本机教程中添加了一些演示代码。单击按钮时，内容应保持不变，菜单应覆盖。透明度现在不是那么重要，但会非常棒

---

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

ListView不向下移动的关键是将覆盖的位置设置为绝对位置。通过这样做，您可以手动设置视图的位置和宽度/高度，而不再遵循flexbox布局。查看下面的简短示例。覆盖的高度固定为360，但可以轻松设置动画或使其动态

“严格使用”；
var React=require（'React-native'）；
变量维度=要求（“维度”）；
//我们可以使用它使覆盖层填充整个宽度
var{width，height}=Dimensions.get（'window'）；
变量{
评估学，
样式表，
文本，
看法
}=反应；
var SampleApp=React.createClass({
render:function（）{
返回(
欢迎来到我们的运动场！
);
}
});
var styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“#F5FCFF”，
},
欢迎:{
尺寸：20，
textAlign:'中心'，
差额：10，
},
//柔性填充，位置绝对，
//固定左/上，宽度设置为窗口宽度
覆盖：{
弹性：1，
位置：'绝对'，
左:0,，
排名：0，
不透明度：0.5，
背景颜色：“黑色”，
宽度：宽度
}  
});
AppRegistry.registerComponent（'SampleApp'，（）=>SampleApp）；
module.exports=SampleApp；

import React，{Component}来自'React'；
从“react native”导入{Image，StyleSheet，View}；
导出默认类应用程序扩展组件{
render（）{
返回(
);
}
}
const s=StyleSheet.create({
背景图片：{
弹性：1，
宽度：空，
高度：空，
},
覆盖：{
位置：'绝对'，
排名：0，
右:0,，
底部：0，
左:0,，
背景颜色：“红色”，
不透明度：0.3
}
});

现场演示：

来源回购：

最聪明的方式

对我来说，最聪明的方法是使用react native的Modals来构建高度可定制的响应性体验，您可以轻松设置模态的运动方向、设置透明度、切换可见性等，我个人从未使用过现有的npm模块来实现侧抽屉或导航栏， 我用情态动词来做这件事。

---

如果您愿意，我可以给出一个示例代码片段，它使用Modals实现了一个导航抽屉

也许最好使用

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

从“react native”导入{View，ImageBackground，Text}；
const styles=StyleSheet.create({
});
...
图像背景的子对象
...

您可以使用此示例创建覆盖。您可以更改覆盖的可见和不可见状态

import React，{Component}来自“React”；
从“react native”导入{View，Text，StyleSheet}；
类弹出扩展组件{
建造师（道具）{
超级（道具）；
此.state={
是的
};
}
render（）{
返回(
{this.state.isPopupTrue&&
(
覆盖层
)
}
);
}
}
export const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“c0d6e4”
},
覆盖：{
位置：“绝对”，
排名：0，
右:0,，
底部：0，
左:0,，
辩护内容：“中心”，
对齐项目：“中心”，
背景颜色：“灰色”，
不透明度：0.9，
},
正文：{
宽度：“20%”，
尺寸：15，
颜色：“黑色”，
fontWeight：“粗体”
},
});我也有同样的问题，我是这样做的

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

从“react native”导入{View，StyleSheet}；
//您希望它在哪里渲染
正在查找方向，请稍候。。。
//在你的风格的底部
const styles=StyleSheet.create({
覆盖容器：{
…StyleSheet.absoluteFillObject，
背景颜色：“#000”，
不透明度：0.8，
辩护内容：“中心”，
对齐项目：“中心”
}
});
谢谢！我试过了，但它仍然会把列表向下移动。这可能是因为动画和setNativeProps吗？找出原因。。。topMenu实现不会移动菜单，而是移动内容区域，这就是它总是移动的原因。现在尝试重新编写以使用菜单进行幻灯片。为什么我们不能只给出
width:null
我想您可以试试。我的意思是你应该设置
位置：'absolute'
来查看被下拉的视图，它可以工作。这将在将来被弃用。您再也不能在图像中添加任何内容了。@Marcio您有来源吗？该消息自上次react native update以来作为警告消息出现。解决方法是开始使用新的ImageBackground组件。这是有道理的，因为无论哪种方式，图像都不应该有任何子对象。
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" 
  }
});