Android 如何使模态在react native中显示为不同的组件
我使用的是Android 如何使模态在react native中显示为不同的组件,android,ios,reactjs,react-native,modal-dialog,Android,Ios,Reactjs,React Native,Modal Dialog,我使用的是react native、native base和react native model依赖项。 我得到了一个主页活动，其中有一个标题和一个按钮，可以打开一个模式 但我还是不知道该怎么做。使用本机基本按钮组件，每当我将onPress事件绑定到showmodel（）函数时，它会说“变量showmodel不存在”，如果我添加this.showmodel（）作为替代，它会在iOS模拟器中抛出一个堆栈限制超出红色背景错误 这是我的父组件： import React, { Component }
react nativenative basereact native modelthis.showmodel（）堆栈限制超出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}来自'React'；
进口{
评估学，
样式表，
文本，
滚动视图，
看法
}从“反应本机”；
从“/src/add entry model”导入AddEntryModal；
从“反应本机标志”导入标志；
进口{
标题，
集装箱，
左边
按钮
偶像
身体，
标题
正确的，
项目,，
输入
}来自“本土基地”；
var MyApp=React.createClass({
getInitialState:函数（）{
返回{
modalVisible:对
}
},
render:function（）{
返回(
…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;
import React，{Component}来自'React'；
从“反应本机模态”导入模态；
从“react native”导入{Text，TouchableOpacity，View}；
var AddEntryModal=React.createClass({
//_showmodel:（）=>this.setState（{modalVisible:true}），
//_hideModal:（）=>this.setState（{modalVisible:false}），
render:function（）{
返回(
你好，世界！
)
}
});
module.exports=加法模；
您可能需要使用模态类的
position:'absolute'