Реагируйте как установить добавление наложения серого в пользовательском интерфейсе

Question

Я пытаюсь достичь сценария ниже в реагировать родной:

1) есть несколько экранов всплывет пользовательский интерфейс ниже

2) когда всплывающий интерфейс, то фон станет серого

3) когда я закончу работу над всплывающим интерфейсом, пользовательский интерфейс исчезнет, ​​и фон снова станет обычным

ниже, как обычно *

это ожидаемый результат

это то, что происходит сейчас

]

меня пытались искать, но все, что я получил, это конвертировать изображение в оттенки серого, а это не то, что мне нужно, не уверен, сможет ли реагировать native для этого?

updated 1 oct 2019: разделяем некоторые подходы кода, используя сейчас:

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

, как показано на изображении «что теперь происходит» Код выше только добавил темный слой сверхумоего интерфейса, но я пытаюсь добиться того, чтобы он стал серым, не показывая другой цвет

Answer 1

@ облако Я понял, чего вы пытаетесь достичь. как только появится всплывающее окно, вам нужно установить весь фон в оттенки серого, верно?

Хорошо, вот одно из решений, которое работает. но для этого я надеюсь, что вы используете значение состояния, чтобы показать и скрыть всплывающее окно. предположим, пусть visible будет значением состояния, которое вы использовали для показа / скрытия всплывающего окна.

Так что в этом случае, когда когда-либо видимое свойство изменится на true, обновите содержимое фоновых представлений на основе значений состояния.

Я не знаю, используете ли вы изображения, текст или представления, чтобы показать эти сценарии ... но я приведу несколько примеров, которые могут помочь вам понять.

, если это представление, то в стилях

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

, если это изображение

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

, подобное этому, основанное на значении состояния, которое необходимо обновить для отображения при показе и скрытии всплывающего окна. Надеюсь, это поможет .... если нет, дайте мне знать, как вам нужна помощь. Спасибо !! ...