如何在官方 react-native Modal 上添加背景可点击叠加层? [英] How to add a backdrop clickable overlay on official react-native Modal?

问题描述

这是官方 react-native modal 文档，这是一个 适用于 iOS 和 Android 的实时示例.

This is the official react-native modal documentation and this is a live example for iOS and Android.

如何添加可点击的背景叠加层，覆盖在我的视图上方和模态下方?

How can I add a clickable backdrop overlay which is over my view and under the modal?

推荐答案

您可以将 Modal 内容包装在可触摸的不透明度中并为其设置背景样式.我编辑了文档中给出的示例.

You can wrap the Modal content in a Touchable Opacity and style it with a background. I edited the sample given in the documentation.

     <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
          Alert.alert('Modal has been closed.');
        }}>
        <TouchableOpacity
          style={{ backgroundColor: 'black', flex: 1,justifyContent:'center' }}
          onPress={() => setModalVisible(!modalVisible)}>
          <View style={styles.modalView}>
            <Text style={styles.modalText}>Hello World!</Text>

            <TouchableHighlight
              style={{ ...styles.openButton, backgroundColor: '#2196F3' }}
              onPress={() => {
                setModalVisible(!modalVisible);
              }}>
              <Text style={styles.textStyle}>Hide Modal</Text>
            </TouchableHighlight>
          </View>
        </TouchableOpacity>
      </Modal>

这篇关于如何在官方 react-native Modal 上添加背景可点击叠加层?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！