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