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

感谢您的帮助！

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

0 个答案: