如何使Modal在react-native中显示为不同的组件

问题描述：

我正在使用react-native，native-base和react-native-modal依赖项. 我有一个 Home 活动，其中有一个带有按钮的标题，可以打开模式.

I'm using react-native, native-base and react-native-modal dependencies. I got a Home activity, where it has a Header with a Button that would open a Modal.

但是我仍然不知道如何使它工作.使用Native-Base Button Component时，每当我将onPress事件绑定到showModal()函数时，它都会说变量showModal不存在"，并且如果我添加this.showModal()作为替代，它将引发stack limit exceeded红色背景错误在iOS模拟器中.

But I still can't figure out how to make it work. Using Native-Base Button Component, whenever I bind the onPress event to my showModal() function it says that "variable showModal doesn't exist", and if I add this.showModal() as instead, it throws a stack limit exceeded red background error in iOS simulator.

这是我的父组件:

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);

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

Then, in a separate file, I wanted to have my Modal Component.

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;

但是由于某些原因无法正常工作，我是本机反应新手. 如果我没有在父类中的某个地方添加<AddEntryModal></AddEntryModal>组件，即使它没有显示，它也会占用空间.

But for some reason is not working, I'm new to react native. If I add the <AddEntryModal></AddEntryModal> Component somewhere inside my parent class, even though it's not being displayed, it takes room.

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

Any idea on how could I approach this?

答

您应该在父类中使用<AddEntryModal />来呈现模式，也需要将可见性值作为道具传递. <AddEntryModal modalVisible={this.state.modalVIsible} />. 您可能需要对模态类使用position: 'absolute'样式，以将其呈现在另一个屏幕的顶部.

You should use <AddEntryModal /> in your parent class to render the modal , also you need to pass the visibility value as a prop. <AddEntryModal modalVisible={this.state.modalVIsible} />. You may need to use position: 'absolute' style for your modal class to render it top of the other screen.

如何使Modal在react-native中显示为不同的组件

相关推荐