Как добавить интерактивное наложение фона на официальном Modal с поддержкой реакции?

Question

Это официальная модальная документация и это живой пример для iOS и Android.

Как я могу добавить интерактивный фоновый оверлей, который находится над моим обзором и под модальным окном?

Answer 1

React Native Elements имеет fantasti c компонент под названием Overlay, который решит вашу проблему. Это спасло меня ранее на этой неделе. Единственная проблема в том, что это часть более крупной библиотеки.
https://react-native-elements.github.io/react-native-elements/docs/overlay.html

Answer 2

Я думаю, что если разделение между фоном и модальным окном не имеет решающего значения для вашего проекта, вы можете справиться с этим следующим образом:

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

Answer 3

Вы можете обернуть модальное содержимое в сенсорную непрозрачность и стилизовать его с фоном. Я редактировал образец, приведенный в документации.

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