Question

我想添加一个视图以覆盖我的整个应用程序。详细信息：每当AppState更改（变为非活动状态或后台）时，都将出现锁定屏幕以隐藏应用程序内容，并且用户应输入密码对其进行解锁。

但是，在IOS中，来自“警报，ActionSheetIOS，共享”的对话框位于所有内容的顶部。结果，我的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（红色）覆盖内容（绿色），但发出警报。我想将lockedView放置在警报的顶部。

React-Native，如何在警报或操作表IOS的顶部添加视图？

0 个答案: