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

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

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

React Native - 如何在其他组件之上创建和呈现组件

1 个答案: