使用react-native-modalbox,元素类型无效

时间:2018-02-01 21:01:45

标签: javascript reactjs react-native

我试图从react-native-modalbox中显示一个模态框。

以下代码显示错误"不变违规:元素类型无效:预期字符串或类/函数但得到:undefined。您可能忘记从其定义的文件中导出组件。"

// React
import * as React from "react";
import * as RN from "react-native";
import { connect } from "react-redux";

// Managers
import { StyleManager } from "../../../managers/StyleManager";

// Components
import Touchable from "../../components/Touchable";
import Modal from 'react-native-modalbox';
import Button from 'react-native-button';

import { Screen } from "../Screen";

const style = StyleManager.style.SearchScreen;
const ICON_SIZE = 15;

export default connect((state) => state)(class MyScreen extends Screen {

    constructor(props) {
        super(props);
        this.state = {
            isOpen: false,
            isDisabled: false,
            swipeToClose: true,
            sliderValue: 0.3
        };
    }

    onClose() {
        console.log('Modal just closed');
    }

    onOpen() {
        console.log('Modal just openned');
    }

    onClosingState(state) {
        console.log('the open/close of the swipeToClose just changed');
    }

    public renderScreen() {
        return (

            /* Full screen container */
            <RN.View style={style.screenContainer}>

                {/* Top container */}
                <RN.View style={style.topContainer}>
                    <Button onPress={() => this.refs.modal1.open()} style={style.btn}>Basic modal</Button>
                </RN.View>

                {/* Bottom container */}
                <RN.View style={style.bottomContainer}>

                <Modal
                    style={[style.modal, style.modal1]}
                    ref={"modal1"}
                    swipeToClose={this.state.swipeToClose}
                    onClosed={this.onClose}
                    onOpened={this.onOpen}
                    onClosingState={this.onClosingState}>
                    <RN.Text style={style.text}>Basic modal</RN.Text>
                    <Button onPress={() => this.setState({ swipeToClose: !this.state.swipeToClose })} style={style.btn}>Disable swipeToClose({this.state.swipeToClose ? "true" : "false"})</Button>
                </Modal>

            </RN.View>

        );
    }
});

错误来自Modal部分,但我无法找到它的确切错误。错误在哪里?

在这里,您可以看到使用相同的react-native-modalbox组件的工作代码: https://github.com/maxs15/react-native-modalbox/blob/master/Example/index.ios.js

1 个答案:

答案 0 :(得分:0)

更改

public renderScreen() {

render() {