如何使 Modal 在 react-native 中显示为不同的组件
Posted
技术标签:
【中文标题】如何使 Modal 在 react-native 中显示为不同的组件【英文标题】：How to make Modal to show up as a different Component in react-native 【发布时间】：2017-05-06 17:13:20 【问题描述】：我正在使用 react-native、native-base 和 react-native-modal 依赖项。
我有一个 Home 活动，其中有一个带有可以打开模式的按钮的标题。
但我仍然不知道如何使它工作。使用 Native-Base Button 组件，每当我将 onPress 事件绑定到我的 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> 组件，即使它没有显示，它也会占用空间。
有什么办法可以解决这个问题吗？
【问题讨论】：
【参考方案1】：你应该在你的父类中使用 <AddEntryModal /> 来渲染 modal ，你还需要将可见性值作为道具传递。 <AddEntryModal modalVisible=this.state.modalVIsible />。
您可能需要为您的模态类使用position: 'absolute' 样式以将其呈现在另一个屏幕的顶部。
【讨论】：
天啊！！！我是如此接近！哈哈，非常感谢你，Hariks！它奏效了，你是一个救生员:) 我有一个简单的问题，如果我在模态组件（子组件）中，我可以更改其中的变量状态吗？通过执行 setState( modalVisible: false) ？还是我必须做其他事情？因为不工作，不让我通过按钮关闭它。以上是关于如何使 Modal 在 react-native 中显示为不同的组件的主要内容，如果未能解决你的问题，请参考以下文章
bootstrap modal 如何设置使其点击对话框外的灰色背景不退出！！
vuejs中input还没输入完就触发了v-modal，如何使input输入完后触发v-modal