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和其他核心贡献者，社区并没有特别感兴趣推动它或者（很少拉请求），所以这将是不安全的围绕此建立你的应用程序。