React Native Modal在加载时使应用程序崩溃

Question

我正在尝试创建一个小的请求框，该请求框从屏幕底部弹出，以让用户确认预订。下面是可能的样机。经过一些研究，模态似乎是可行的方法。

在 启动应用程序时出现问题<Modal />，会在主屏幕上冻结该应用程序。必要时加载模态（在下面的代码中）使应用程序崩溃，没有错误。

代码 组件呈现<Model />（称为<RequestTeacherPopup />）

// @flow
import React from 'react'
import { ScrollView, View } from 'react-native'
...

export default class RequestScreen extends React.Component<Props, {nextSeminar: DateTime, teachers: []}> {
  constructor (props: Props) {
    super(props)
    ...

    this.state = {
      nextSeminar: nextSeminar,
      teachers: null,
      requestVisibility: false,
      requestedTeacher: null
    }
  }

  ...

  render () {
    var teacherList = []

    if (this.state.teachers) {
      for (let teacherItem of this.state.teachers) {
        if (teacherItem.key !== this.props.profile.defaultSeminar) {
          let teacher: Teacher = teacherItem.value
          let teacherPic: {uri: string} = ('picture' in teacher) ? { uri: teacher.picture } : null
          teacherList.push(
            <ListItem
              roundAvatar
              avatar={teacherPic}
              onPressRightIcon={
                function () {
                  this.setState({
                    requestVisibility: true,
                    requestedTeacher: teacher
                  })
                }.bind(this)
              }
              key={teacherItem.key}
              title={`${teacher.firstName} ${teacher.lastName}`}
              subtitle={`${teacher.taughtCourses} | Room ${teacher.room}`} />
            )
        }
      }
    }

    return (
      <View style={styles.mainContainer}>
        <ScrollView>
          <List>
            {teacherList}
          </List>
          {
            (this.state.requestVisibility)
            ? (<RequestTeacherPopup
              requestedTeacher={this.state.requestedTeacher}
              onFinish={() => this.setState({ requestVisibility: false })} />)
            : null
          }
        </ScrollView>
      </View>
    )
  }
}

RequestTeacherPopup组件

// @flow

import React, { Component } from 'react'
import { View, Image, Text } from 'react-native'
import { Divider, Overlay } from 'react-native-elements'
import Modal from 'react-native-modal'
...

class RequestTeacherPopup extends Component<{isVisible: boolean, requestedTeacher: Teacher, onFinish: () => void}> {

  state = {
    markedDates: this.getDaysInMonth(DateTime.local().month, DateTime.local().year, DISABLED_DAYS),
    calVisiblity: false,
    requestedDate: null,
    requestedDay: null
  }

 ...

  render () {
    return (
      <Modal
        style={Styles.bottomModal}
        isVisible
        onSwipe={this.handleRequest}
        swipeDirection='up' >

      ...

      </Modal>
    )
  }
}

当<Modal />没有通过任何子代时，仍然会出现问题，并且我尝试了npm中的内置模式和react-native-modal程序包。

谢谢你的帮助！

Answer 1

您好，在显示或关闭任何模式时，

你有用setTimeout(()=>{},miliseconds)

modal是覆盖整个屏幕的屏幕外部窗口。