React-Native Navigator IOS錯誤不能用於背景圖像

Question

看起來NavigatorIOS在全屏幕背景圖像作爲其兄弟時並不顯示當前內容。

您能否讓我知道是否有解決方法，我不想將背景圖像移入每個組件頁面。

下面的示例代碼：

https://rnplay.org/apps/wrntpQ

'use strict'; 

    var React = require('react-native'); 
    var { 
     AppRegistry, 
     StyleSheet, 
     Text, 
     View, 
     Image, 
     NavigatorIOS 
     } = React; 

    var SampleComponent = React.createClass({ 
     render: function() { 
      return (
       <View style={{ 
      flex: 1, 
      justifyContent: 'center', 
      alignItems: 'center', 
      backgroundColor: 'transparent' 
      }}> 
        <Text style={{color: 'red'}}>Hello</Text> 
       </View> 
      ); 
     } 
    }); 

    AppRegistry.registerComponent('SampleComponent',() => SampleComponent); 

    var SampleApp = React.createClass({ 
     render: function() { 
      return (
       <View style={styles.container}> 
        <View style={styles.bgContainer}> 
         <Image 
          style={styles.logo} 
          source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}/> 
        </View> 
        <NavigatorIOS 
         style={styles.navigator} 
         initialRoute={{ 
         component: SampleComponent, 
         title: 'My View Title' 
          }} /> 
       </View> 
      ); 
     } 
    }); 

    /* 
    // It works if you put the following line in line 39 
    <SampleComponent style={styles.navigator} /> 

    // But it doesn't work when you put the following lines in 39 
    <NavigatorIOS 
    style={styles.navigator} 
    initialRoute={{ 
    component: SampleComponent, 
    title: 'My View Title' 
    }} /> 
    */ 

    var styles = StyleSheet.create({ 
     container: { 
      flex: 1, 
      justifyContent: 'center', 
      alignItems: 'center', 
      backgroundColor: '#F5FCFF', 
     }, 
     bgContainer: { 
      position: 'absolute', 
      left: 0, 
      top: 0, 
      right: 0, 
      bottom: 0 
     }, 
     logo: { 
      flex: 1, 
      // remove width and height to override fixed static size 
      width: null, 
      height: null, 
      // make the background transparent so you actually see the image 
      backgroundColor: 'transparent' 
     }, 
     navigator: { 
      flex: 1, 
      backgroundColor: 'transparent' 
     }, 
     welcome: { 
      fontSize: 20, 
      textAlign: 'center', 
      margin: 10, 
     }, 
     instructions: { 
      textAlign: 'center', 
      color: '#333333', 
      marginBottom: 5, 
     }, 
    }); 

    AppRegistry.registerComponent('SampleApp',() => SampleApp); 

    module.exports = SampleApp; 

Answer 1

有人告訴我，這是目前不支持。

他們強烈建議您使用導航器，而不是NavigatorIOS（見comparison docs here，然後你不會有這個問題沒有積極地對工作 NavigatorIOS - 這是一個「社會責任」，因爲它本質上是未使用通過Facebook和其他核心貢獻者，社區並沒有特別感興趣推動它或者（很少拉請求），所以這將是不安全的圍繞此建立你的應用程序。