React-Native, Как добавить View в начало оповещения или actionIOS? - PullRequest
Новая
       30

React-Native, Как добавить View в начало оповещения или actionIOS?

0 голосов
/ 07 ноября 2018

Я хочу добавить вид, чтобы охватить все мое приложение. детали: всякий раз, когда AppState изменяется (на неактивный или фоновый), должен появиться экран блокировки, чтобы скрыть содержимое приложения, и пользователь должен ввести пароль, чтобы разблокировать его.

Однако в IOS диалоги из «Alert, ActionSheetIOS, Share» находятся на вершине всего. В результате мой LockedView не может покрыть их. Есть ли способ создать обложку этих диалогов?

Ниже приведен простой пример кода для воспроизведения моего случая.

(App.js) 

import React, {Component} from "react"
import {
  Alert,
  AppState,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from "react-native"

export default class extends Component {
  constructor (props) {
    super(props)

    AppState.addEventListener("change", this._handleAppStateChange)
    this.state = {
      isLocked: false
    }
  }

  componentWillUnmount() {
    this.unsubscribe()
    AppState.removeEventListener("change", this._handleAppStateChange)
  }

  _handleAppStateChange = (nextAppState) => {
    const isLocked = nextAppState !== "active"
    this.setState({isLocked})
  }

  onPressAlert () {
    Alert.alert("alert")
  }

  renderContent () {
    return (
      <View style={styles.content}>
        <Text>UNLOCKED</Text>
        <TouchableOpacity onPress={this.onPressAlert}>
          <Text>Alert</Text>
        </TouchableOpacity>
      </View>
    )
  }

  renderLockedView (isLocked) {
    return isLocked ?
      <View style={styles.locked}><Text>LOCKED</Text></View> : null
  }

  render() {
    const {isLocked} = this.state

    return (
      <View style={styles.container}>
        {this.renderContent()}
        {this.renderLockedView(isLocked)}
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  content: {
    flex: 1,
    backgroundColor: "green",
    justifyContent: "center",
    alignItems: "center",
  },
  locked: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: "red",
    justifyContent: "center",
    alignItems: "center",
  },
})

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

...