Question

我正在尝试在本机反应中实现以下方案：

1）没有几个屏幕会在下面弹出ui

2）当ui弹出时，背景将变为灰度

3）当我在弹出式ui界面上完成工作后，ui消失并且背景恢复为正常颜色

以下是正常的用户界面

这是预期的结果

这就是现在发生的事情

]

我曾尝试搜索一下，但是我所得到的只是将图像转换为灰度，这不是我所需要的，不确定是否可以通过响应本机来实现？

2019年10月1日更新：现在使用一些代码方法：

    <View style={styles.modalStyle}>
      <TouchableOpacity onPress={() => this.setUpdateModalVisible()}>
        <View style={styles.transparentShelter} />
      </TouchableOpacity>
      {renderList}
    </View>

transparentshelter的样式：

    transparentShelter: {
        height: "100%",
        width: SCREEN_W,
        backgroundColor: "rgba(0,0,0,0.4)"
    },

如上面的图像“现在将发生什么”所示，上面的代码仅在UI的顶部添加了一个较暗的层，但是我试图实现的是UI仅在不显示其他颜色的情况下变为灰度

Answer 1

@云我了解您要达到的目标。一旦弹出窗口进入，您需要将整个背景设置为灰度级吗？

好的，这是一种可行的解决方案。但是为此，我希望您使用状态值来显示和隐藏弹出窗口。假设让visible为您用来显示/隐藏弹出窗口的状态值。

因此，在这种情况下，只要可见属性更改为true，就会根据状态值n更新背景视图的内容。

我不知道您是使用图像还是文本或视图来显示这些信息。.但是我将提供一些示例来使您理解。

如果是视图，则为样式

<View style={[this.state.visible ? setGrayScaleStyles : normalStyles]}></View>

如果是图片

{this.state.visible ? <Image source = {grayScale source}/> : <Image source = {normal source}/>}

像

这样根据状态值，您需要在显示和隐藏弹出窗口时更新视图。希望对您有帮助。...如果没有让我知道您需要哪种帮助。谢谢!! ...

React Native如何在UI上设置添加灰度叠加

1 个答案: