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

Question

我正在尝试在React Native中实现以下方案：

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}/>}

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