向反應導航導航器添加疊加層

Question

我正在嘗試向react-navigation導航器添加疊加層（例如，顯示錯誤彈出窗口/多士爐/調試按鈕等）。

但是我有一個問題：

當我把反應導航在視圖，頂部覆蓋的反應要麼導航不顯示或以某種方式被扭曲。

import React, { Component } from 'react'; 
import { Text, View } from 'react-native'; 
import { StackNavigator } from 'react-navigation'; 

class HomeScreen extends React.Component { 
    static navigationOptions = { 
    title: 'Welcome', 
    }; 
    render() { 
    return <Text>Hello, Navigation!</Text>; 
    } 
} 

const SimpleApp = StackNavigator({ 
    Home: { screen: HomeScreen }, 
}); 

class SimpleAppWithOverlay extends React.Component { 
    render() { 
    return( 
     <View> 
     <View style={{position: "absolute", backgroundColor:"transparent", margin:30}}> 
      <Text>Some Overlay</Text> 
     </View> 
     <SimpleApp/> 
     </View>); 
    } 
} 

這裏有兩個片段展示了我的意思在現場編輯：

• 基本反應導航設置：https://snack.expo.io/ryI4oCvQW
• 相同，但具有覆蓋嘗試：https://snack.expo.io/HkSgoCDX-

您可以在第二個示例中看到疊加層出現，但底層應用只是不可見。

可以工作嗎？怎麼樣？

Answer 1

改變了你的代碼有點

import React, { Component } from 'react'; 
import { AppRegistry, Text, View } from 'react-native'; 
import { StackNavigator } from 'react-navigation'; 

class HomeScreen extends React.Component { 
    static navigationOptions = { 
    title: 'Welcome', 
    }; 
    render() { 
    return (
     <View style={{ flex: 1 }}> 
     <Text>Hello, Navigation!</Text> 
     </View> 
    ) 
    } 
} 

class SimpleAppWithOverlay extends React.Component { 
    render() { 
    return (
     <View style={{flex: 1}}> 
     <SimpleApp /> 
     <View style={{ position: "absolute", backgroundColor: 'rgba(255,0,0,0.4)', top: 0, bottom: 0, left: 0, right: 0 }}> 
      <Text style={{ paddingTop: 8 }}>Some Overlay</Text> 
     </View> 
     </View> 
    ); 
    } 
} 

const SimpleApp = StackNavigator({ 
    Home: { screen: HomeScreen }, 
}); 

AppRegistry.registerComponent('overlayapp',() => SimpleAppWithOverlay); 

你應該注意到，position: 'absolute'只父是絕對不喜歡絕對在CSS定位相對。

如果你想疊加在navigationBar上面，你可以做一些類似於navigationOptions.headerRight的事情。