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

Question

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

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

这是我的模态代码

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

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

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