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

我正在使用RN 0.47，我正尝试构建一个组件，可以将消息传递给当前显示的顶层组件，它的功能类似于Alert API提供的功能，但是我想要以不同的方式定位它。React Native - 如何在其他组件上创建和渲染组件

我正在使用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;

码这是当网络获取调用模态函数的代码失败

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函数内，但模态永远不会显示。

来源

2017-08-24 user3676224