Использование response-native-modalbox в ListView приводит к тому, что modalbox заполняет только пространство элемента списка, а не полный экран?

Когда я использую пакет response-native-modalbox с FlatList (каждый элемент списка может порождать отдельный модальный при нажатии), создаваемый модальный экран заполняет только область элемента списка вместо того, чтобы переходить в полноэкранный режим, как обычно.

Вот рабочая закуска, которая показывает проблему:

https://snack.expo.io/BkICbjwWQ

Для полноты картины я также вставлю сюда код:

import React, { Component } from 'react';
import { Text, View, StyleSheet, FlatList, Button } from 'react-native';
import { Constants } from 'expo';
import Modal from "react-native-modalbox";

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-elements'; // Version can be specified in package.json

export default class App extends Component {
  render() {
    let myRefs = [];
    return (
      <View style={styles.container}>
        <FlatList
          data={[{key: 'a'}, {key: 'b'}]}
          renderItem={({item}) => <View>
                      <Modal
                        style={[styles.modal]}
                        ref={(modalItem) => {myRefs[item.key] = modalItem;} }
                        swipeToClose={true}
                        onClosed={this.onClose}
                        onOpened={this.onOpen}
                        onClosingState={this.onClosingState}>
                        <Text style={styles.text}>Basic modal</Text>
                    </Modal><Text>{item.key}</Text><Button title="Basic Modal" onPress={() => myRefs[item.key].open()} style={styles.btn}>Basic modal</Button></View>}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
});

У меня в основном тот же вопрос / проблема, что и (response-native- modalbox застрял в контексте дочернего компонента), но на этот вопрос не было ответа, и он не предоставил достаточно деталей с минимальным рабочим примером.


react-native javascript react-native-flatlist
person Halcyon    schedule 20.06.2018    source источник
comment
попробуйте использовать coverScreen = {true} как опору для вашего модального окна. это может помочь вам   -  person Ali SabziNezhad    schedule 20.06.2018
comment
Ух ты! Ты гений! и мне нужно более внимательно прочитать документацию ...   -  person Halcyon    schedule 20.06.2018
comment
Я думаю, что вы отображаете модальное представление в элементе списка, это не очень хороший шаблон. Вы должны передать обратный вызов при нажатии элемента в корневое представление, а затем обработать там модальное окно.   -  person redwind    schedule 20.06.2018

Ответы (1)


arrow_upward
1
arrow_downward

Ваш модальный компонент находится внутри визуализированного элемента. Это приводит к его привязке к элементу. Хотя вы можете решить эту проблему, используя соответствующие реквизиты или некоторые индивидуальные стили, это неэффективно. У вас было бы 1000 модальных компонентов, если бы в вашем списке было 1000 элементов.

Вы должны переместить свой модальный компонент и сделать его родственником FlatList. Таким образом, у вас будет только одно модальное окно. Вы можете изменить содержимое модального окна с помощью значения состояния.

Образец

export default class App extends Component {
  render() {
    let myRefs = [];
    return (
      <View style={styles.container}>
        <Modal
          style={[styles.modal]}
          ref={modalItem => { myRefs['modal'] = modalItem; }}
          swipeToClose={true}
          onClosed={this.onClose}
          onOpened={this.onOpen}
          onClosingState={this.onClosingState}>
          <Text style={styles.text}>Basic modal</Text>
        </Modal>
        <FlatList
          data={[{ key: 'a' }, { key: 'b' }]}
          renderItem={({ item }) => (
            <View>
              <Text>{item.key}</Text>
              <Button
                title="Basic Modal"
                onPress={() => myRefs['modal'].open()}
                style={styles.btn}>
                Basic modal
              </Button>
            </View>
          )}
        />
      </View>
    );
  }
}
person bennygenel    schedule 20.06.2018