我正在使用RN 0.47,我正在尝试构建一个组件,我可以传递消息(prop)并将其呈现在当前显示组件之上,其功能与提供的Alert API类似,但是我想要样式和它也有不同的定位 .
我正在使用React Navigation来创建TabNavigator视图,因此我将在多个选项卡/模块中调用该组件 .
这是我的Modal代码
import React, { Component } from 'react';
import { Modal, Text, TouchableHighlight, View } from 'react-native';
class ModalView extends Component {
state = {
modalVisible: true,
}
setModalVisible(visible) {
this.setState({modalVisible: visible});
}
render() {
return (
<View style={{marginTop: 22}}>
<Modal
animationType={"slide"}
transparent={false}
visible={this.state.modalVisible}
onRequestClose={() => {alert("Modal has been closed.")}}
>
<View style={{marginTop: 22}}>
<View>
<Text>Hello World!</Text>
<TouchableHighlight onPress={() => {
this.setModalVisible(!this.state.modalVisible)
}}>
<Text>Modal</Text>
<Text>is</Text>
<Text>displayed</Text>
</TouchableHighlight>
</View>
</View>
</Modal>
</View>
);
}
}
export default ModalView;
这是在网络提取失败时调用Modal的函数的代码
import React from 'react';
import {ToastAndroid,Alert,Platform} from 'react-native';
import ModalView from "./Modal"
module.exports = async function(url, cb) {
try {
//do something
} catch(error) {
Platform.OS == "ios"?
<ModalView />
:
ToastAndroid.show(error.toString(), ToastAndroid.LONG)
}
}
最后,上面的函数在react-navigation选项卡组件的componentDidMount函数中被调用和执行,但模式永远不会显示 .
1 回答
显然,你需要一个模态:
https://facebook.github.io/react-native/docs/modal.html
但是,如果你需要更通用的东西,你可以使用
position: 'absolute'
样式,结合top
,right
,bottom
和left
样式 .