IT技术 - 如何使 Modal 在 react-native 中显示为不同的组件 - 吾爱随笔录

我正在使用react-native,native-base和react-native-modal依赖项。我有一个主页活动，它有一个带有按钮的标题，可以打开一个模态。

但我仍然无法弄清楚如何使它工作。使用 Native-Base Button Component，每当我将 onPress 事件绑定到我的 showModal() 函数时，它都会说“变量 showModal 不存在”，如果我添加this.showModal()as 代替，它会stack limit exceeded在 iOS 模拟器中引发红色背景错误。

这是我的父组件：

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    ScrollView,
    View
} from 'react-native';
import AddEntryModal from './src/add-entry-modal';
import Flag from 'react-native-flags';
import {
    Header,
    Container,
    Left,
    Button,
    Icon,
    Body,
    Title,
    Right,
    Item,
    Input
} from 'native-base';

var MyApp = React.createClass({

    getInitialState: function() {
        return {
            modalVisible: true
        }
    },

    render: function() {
        return (
            <Container>
                <Header style={{ backgroundColor: '#333333' }}>
                    <Left>
                        <Button transparent>
                            <Icon name='ios-settings' />
                        </Button>
                    </Left>
                    <Body>
                        <Item rounded>
                            <Icon active name='ios-search' />
                            <Input placeholder={'Search'} />
                        </Item>
                    </Body>
                    <Right>
                        <Button onPress={ showModal() } transparent>
                            <Icon name='ios-contact' />
                            <Icon name='ios-add' />
                        </Button>
                    </Right>
                </Header>

                <ScrollView>
                    ... <-- have some irrelevant stuff here
                </ScrollView>
            </Container>
        );
    },

    showModal: function() {
        this.setState(
        {
            modalVisible: true
        })
    }
});

AppRegistry.registerComponent('myapp', () => MyApp);

然后，在一个单独的文件中，我想要我的模态组件。

import React, { Component } from 'react';
import Modal from 'react-native-modal';
import { Text, TouchableOpacity, View } from 'react-native';


var AddEntryModal = React.createClass({

    // _showModal: () => this.setState({ modalVisible: true }),

    // _hideModal: () => this.setState({ modalVisible: false }),

    render: function() {
      return (
        <View style={{ flex: 1 }}>
          <Modal isVisible={ this.props.modalVisible }>
            <View style={{ flex: 1 }}>
              <Text>Hello World!</Text>
            </View>
          </Modal>
        </View>
      )
    }
});

module.exports = AddEntryModal;

但由于某种原因不起作用，我是本机react的新手。如果我将<AddEntryModal></AddEntryModal>Component添加到父类中的某处，即使它没有被显示，它也会占用空间。

关于我如何解决这个问题的任何想法？