React Native - 如何在其他组件之上创建和渲染组件

Question

我正在使用 RN 0.47，我正在尝试构建一个组件，我可以将消息 (prop) 传递给该组件并将其呈现在当前显示组件的顶部，其功能类似于提供的 Alert API，但是我想要以不同的方式对其进行样式和定位。

我正在使用 React Navigation 创建 TabNavigator 视图，因此我将在多个选项卡/模块中调用该组件。

这是我的模态代码

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 函数中被调用和执行，但模态永远不会显示。

Answer 1

显然，您需要一个 Modal：
https://facebook.github.io/react-native/docs/modal.html

但是，如果你需要更通用的东西，你可以使用position: 'absolute' 样式，结合top、right、bottom 和left 样式。