我正在使用 react-native , native-base和 react-native-modal依赖项。
我有一个 Home Activity ，其中有一个标题和一个可以打开模态框的按钮。
但我仍然不知道如何让它发挥作用。使用 native 基础按钮组件，每当我将 onPress 事件绑定(bind)到我的 showModal() 函数时，它都会说“变量 showModal 不存在”，如果我添加 this.showModal()相反，它抛出一个 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;
但由于某种原因无法正常工作，我是新来的本地人。
如果我添加 <AddEntryModal></AddEntryModal>在我的父类中某处的组件，即使它没有被显示，它也会占用空间。
关于我该如何处理这个问题有什么想法吗？
最佳答案
你应该使用 <AddEntryModal />在您的父类中渲染模态，您还需要将可见性值作为 Prop 传递。 <AddEntryModal modalVisible={this.state.modalVIsible} /> .
您可能需要使用 position: 'absolute'模式类的样式以将其呈现在另一个屏幕的顶部。
关于android - 如何使 Modal 在 react-native 中显示为不同的组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43823242/