javascript - 如何在官方 react-native Modal 上添加背景可点击覆盖？

Question

这是官方的 react-native modal文档，也是 iOS 和 Android 的一个活生生的例子。

如何在我的视图上方和模式下方添加可点击的背景覆盖？

标签： javascriptreactjsreact-native

Answer 1

您可以将 Modal 内容包装在 Touchable Opacity 中并使用背景设置样式。我编辑了文档中给出的示例。

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