1

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

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

4

3 回答 3

3

您可以将 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>
于 2020-05-27T09:28:58.120 回答
0

我认为如果背景和模态之间的分离对您的项目并不重要，您可以这样处理：

       <Modal
          animationType="slide"
          transparent={true}
          style={{ width: '100%', alignSelf: 'center', height: '100%', justifyContent: 'flex-start' }}
          visible={this.state.modalVisible}
          onRequestClose={() => {
            // Do smth
          }}>
          <TouchableWithoutFeedback style={{ flex: 1 }} onPress={() => {
            // Do the backdrop action
          }}>
            <View style={{ backgroundColor: '#fff', flex: 1, width: '80%', height: '50%' }} >
              <Text> Your content </Text>
            </View>
          </TouchableWithoutFeedback>
        </Modal>
于 2020-05-27T09:41:23.103 回答
0

React Native Elements 有一个很棒的组件Overlay，可以解决你的问题。本周早些时候它救了我。唯一的问题是它是更大图书馆的一部分。
https://react-native-elements.github.io/react-native-elements/docs/overlay.html

于 2020-05-27T09:32:18.473 回答