Как предотвратить исчезновение модального окна при блокировке экрана на Android? - PullRequest
Новая
       28

Как предотвратить исчезновение модального окна при блокировке экрана на Android?

0 голосов
/ 10 апреля 2019

Я новичок в React Native, поддерживающий небольшое приложение для Android. Во время тестирования я столкнулся с ошибкой модалов, которую мне не удалось устранить. Прежде чем я вернусь к разработчику с этой ошибкой, я хотел бы попытаться понять / исправить ее самостоятельно (с вашей помощью, конечно).

Описание ошибки: при определенной последовательности действий пользовательский интерфейс приложения зависает и не реагирует на взаимодействие с пользователем. При этом аппаратные кнопки Android работают нормально.

Приложение - это базовый сканер штрих-кода, отправляющий GET-запросы на сервер и обрабатывающий ответы. Если данные ответа содержат флаг ошибки, отображается модальное окно с соответствующей информацией и кнопками выбора.

Мне удалось точно определить случаи замораживания для следующего поведения: Если модальное предупреждение остается активным на экране до тех пор, пока экран не заблокируется (нажатием кнопки или таймером блокировки экрана), при последующем разблокировании модальное окно больше не отображается на экране.

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

Модальный код окна 

// @flow
/* imports */

type Props = {
    warningText: ?string,
    options: ?string[],
    visible: boolean,
    onPress: (value: number) => void,
}

export default class WarningModal extends PureComponent<Props> {
    renderButtons = () => {
        /* code omitted */
    }

    render() {
        const { warningText, options, visible } = this.props
        return (
            <Modal
                visible={visible}
                fullScreen
                transparent
                onRequestClose={() => {}}
            >
                <View>
                    <View>
                        <Text>Title</Text>
                        <View>
                            <Text>{warningText}</Text>
                        </View>
                        {options && options.length > 0 ? this.renderButtons() : undefined}
                    </View>
                </View>
            </Modal>
        )
    }
}

Единственные два места в приложении, где showModal имеет значение false, находятся в классе SceneComponent следующим образом:

  1. при инициализации переменной состояния: 
state = {
        unitInfo: new Unit(),
        showModal: false,
    }
  1. в методе, который обрабатывает нажатие кнопки опции в модальном окне 
onWarningPress = async (value: number) => {
        const {
            userStore: {
                state: {
                    user,
                },
            },
        } = this.props
        const { unitInfo } = this.state
        try {
            await saveWarning(value, user)
            this.setState({ showModal: false })
        } catch (error) {
            Alert.showAlert()
        }
    }

Пока что я не смог найти решение этой проблемы, поэтому я надеюсь, что вы можете указать мне правильное направление, как избежать закрытия мод без взаимодействия с пользователем. Желаемое поведение заключается в том, что модальное предупреждение остается на экране неограниченное время, пока пользователь не нажмет кнопку выбора.

1 Ответ

0 голосов
/ 10 апреля 2019

Компонент React Native <Modal /> содержит ошибки.Вы можете создать свой собственный модальный компонент, применив стиль StyleSheet.absoluteFill к <View />, который обернет ваше модальное содержимое.

...