Исправлена ​​ошибка с NavigatorIOS от React-Native

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 и другими ключевыми участниками, и сообщество не особенно заинтересовано в том, чтобы продвигать его вперед (очень мало запросов на тягу), поэтому было бы небезопасно создавать приложение вокруг этого.